@charset "UTF-8";
#bg_in .in_shared_main,
#bg_in .in_world_main,
#bg_in .in_story_main {
  opacity: 0; }

#bg_in .in_world_main img:last-child{
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition:5s;
}

#bg_in .in_world_main img.active{
  opacity: 1;
  transition:5s;
}

p.voice:hover {
  opacity: .8; }

.twitter_area .trigger {
  cursor: pointer; }
  .twitter_area .trigger img.hoverOn,
  .twitter_area .trigger img.hoverOff {
    position: absolute;
    top: 0;
    left: 0; }
  .twitter_area .trigger img.hoverOn {
    opacity: 0;
    transition: opacity 400ms; }

.twitter_area .trigger:hover img.hoverOn {
  opacity: 1; }

a img {
  transition: opacity 400ms;
  opacity: 1;
}
a img:hover {
    /*opacity: .8;*/
}

a img.hover_on:hover {
  opacity: 1; }

#loading span {
  font-family: Garamond, "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif; }

#banner_area {
  display: none; }

body#top #banner_area {
  display: block; }

#bg > div.front,
#bg > div.top_page {
  margin: 0 0 0 -750px;
  position: absolute;
  left: 50%; }

body#top #bg {
  opacity: 0;
  transition: opacity 3000ms linear; }

body#top.jsAppear #bg {
  opacity: 1; }

body#top .chara01 {
  transform: translate3d(-20px, 42px, 0);
  transition: transform 4600ms ease-out; }

body#top.jsAppear .chara01 {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top .chara02 {
  transform: translate3d(0, 46px, 0);
  transition: transform 4600ms ease-out; }

body#top.jsAppear .chara02 {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top .chara03 {
  transform: translate3d(0, -20px, 0);
  transition: transform 4600ms ease-out; }

body#top.jsAppear .chara03 {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top #bg .top_page {
  opacity: 1;
  transform: translate3d(50px, 0, 0);
  transition: transform 4600ms ease-out; }

body#top.jsAppear #bg .top_page {
  transform: translate3d(0, 0, 0); }

body#top #bg .lay {
  opacity: 0;
  transition: opacity 1200ms linear 2500ms; }

body#top.jsAppear #bg .lay {
  opacity: 1; }

body#top #bg .front {
  transform: translate3d(-300px, 0, 0);
  transition: transform 4600ms ease-out; }

body#top.jsAppear #bg .front {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top #container .patch {
  opacity: 0;
  transition: opacity 1000ms ease-out;
  transition-delay: 6400ms; }

body#top.jsAppear #container .patch {
  opacity: 1; }

body#top #container .title {
  transform: translate3d(20px, 0, 0);
  opacity: 0;
  transition: transform 2000ms ease-out, opacity 1000ms ease-out;
  transition-delay: 4000ms;
  transition-timing-function: ease-out; }

body#top.jsAppear #container .title {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top #container .catch {
  transform: translate3d(20px, 0, 0);
  opacity: 0;
  transition: transform 2000ms ease-out, opacity 1000ms ease-out;
  transition-delay: 4200ms;
  transition-timing-function: ease-out; }

body#top.jsAppear #container .catch {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top #container .creator {
  transform: translate3d(20px, 0, 0);
  opacity: 0;
  transition: transform 2000ms ease-out, opacity 1000ms ease-out;
  transition-timing-function: ease-out;
  transition-delay: 4400ms; }

body#top.jsAppear #container .creator {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top #banner_area {
  transform: translate3d(20px, 0, 0);
  opacity: 0;
  transition: transform 2000ms ease-out 4600ms, opacity 1000ms ease-out 4600ms;
  transition-timing-function: ease-out; }

body#top.jsAppear #banner_area {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top #navi .navi_01 {
  opacity: 0;
  transition: transform 500ms, opacity 500ms;
  transition-timing-function: ease;
  transition-delay: 3620ms;
  transform: translate3d(-40px, 0, 0); }

body#top.jsAppear #navi .navi_01 {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top #navi.jsAppear .navi_01 {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top #navi .navi_02 {
  opacity: 0;
  transition: transform 500ms, opacity 500ms;
  transition-timing-function: ease;
  transition-delay: 3740ms;
  transform: translate3d(-40px, 0, 0); }

body#top.jsAppear #navi .navi_02 {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top #navi.jsAppear .navi_02 {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top #navi .navi_03 {
  opacity: 0;
  transition: transform 500ms, opacity 500ms;
  transition-timing-function: ease;
  transition-delay: 3860ms;
  transform: translate3d(-40px, 0, 0); }

body#top.jsAppear #navi .navi_03 {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top #navi.jsAppear .navi_03 {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top #navi .navi_04 {
  opacity: 0;
  transition: transform 500ms, opacity 500ms;
  transition-timing-function: ease;
  transition-delay: 3980ms;
  transform: translate3d(-40px, 0, 0); }

body#top.jsAppear #navi .navi_04 {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top #navi.jsAppear .navi_04 {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top #navi .navi_05 {
  opacity: 0;
  transition: transform 500ms, opacity 500ms;
  transition-timing-function: ease;
  transition-delay: 4100ms;
  transform: translate3d(-40px, 0, 0); }

body#top.jsAppear #navi .navi_05 {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top #navi.jsAppear .navi_05 {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top #navi .navi_06 {
  opacity: 0;
  transition: transform 500ms, opacity 500ms;
  transition-timing-function: ease;
  transition-delay: 4220ms;
  transform: translate3d(-40px, 0, 0); }

body#top.jsAppear #navi .navi_06 {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top #navi.jsAppear .navi_06 {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top #navi .navi_07 {
  opacity: 0;
  transition: transform 500ms, opacity 500ms;
  transition-timing-function: ease;
  transition-delay: 4340ms;
  transform: translate3d(-40px, 0, 0); }

body#top.jsAppear #navi .navi_07 {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top #navi.jsAppear .navi_07 {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top #navi .navi_08 {
  opacity: 0;
  transition: transform 500ms, opacity 500ms;
  transition-timing-function: ease;
  transition-delay: 4460ms;
  transform: translate3d(-40px, 0, 0); }

body#top.jsAppear #navi .navi_08 {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top #navi.jsAppear .navi_08 {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top #navi .navi_09 {
  opacity: 0;
  transition: transform 500ms, opacity 500ms;
  transition-timing-function: ease;
  transition-delay: 4560ms;
  transform: translate3d(-40px, 0, 0); }

body#top.jsAppear #navi .navi_09 {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top #navi.jsAppear .navi_09 {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top #navi .navi_10 {
  opacity: 0;
  transition: transform 500ms, opacity 500ms;
  transition-timing-function: ease;
  transition-delay: 4660ms;
  transform: translate3d(-40px, 0, 0); }

body#top.jsAppear #navi .navi_10 {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top #navi.jsAppear .navi_10 {
  opacity: 1;
  transform: translate3d(0, 0, 0); }

body#top #navi #sound_area {
  opacity: 0;
  transition: opacity 1200ms ease-out;
  transition-delay: 4340ms; }

body#top.jsAppear #navi #sound_area {
  opacity: 1; }

body#top #navi.jsAppear #sound_area {
  opacity: 1; }

.btn_preregistration {
  display: none; }

body#top .btn_preregistration {
  display: block;
  transform: rotate(107deg);
  transform-origin: 172px 102px;
  transition: transform 1800ms ease-out 3900ms; }

body#top.jsAppear .btn_preregistration {
  transform: rotate(0);
  margin-top: 0; }

.btn_twicampaign {
  display: none; }

body#top .btn_twicampaign {
  display: block;
  transform: rotate(214deg);
  transform-origin: -5px -28px;
  transition: transform 3600ms ease-out 3000ms; }

body#top.jsAppear .btn_twicampaign {
  transform: rotate(0deg); }

body#top .btn_twicampaign_inner {
  transform: rotate(110deg);
  margin-left: -100px;
  transform-origin: 140px 128px;
  transition: transform 800ms ease-out 5400ms, margin-left 800ms ease-out 5400ms; }

body#top.jsAppear .btn_twicampaign_inner {
  margin-left: 0;
  transform: rotate(0deg); }

body#top .twitter_area {
  transform: translate3d(0, -280px, 0);
  opacity: 0;
  transition: transform 1500ms ease 4500ms, opacity 1800ms ease 4500ms; }

body#top.jsAppear .twitter_area {
  transform: translate3d(0, 0, 0);
  opacity: 1; }

body#top #container .anniversary {
  position: absolute;
  top: 10px;
  left: 30px;
  opacity: 0;
  transition: opacity 1000ms linear;
  transition-delay: 4700ms; }

body#top.jsAppear #container .anniversary {
  opacity: 1; }

body#top #container .video {
  opacity: 0;
  transition: opacity 1000ms linear;
  transition-delay: 4700ms; }

body#top.jsAppear #container .video {
  opacity: 1; }

#bg p {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }

.particleBlock {
  position: relative;
  width: 1280px;
  height: 100%;
  margin: 0 auto; }

.particle {
  position: absolute; }

.particle:nth-child(1) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle1 10958ms infinite 4390ms;
  bottom: -5px; }

@keyframes particle1 {
  0% {
    transform: translate3d(742.4px, -5px, 0); }
  91% {
    opacity: 0; }
  100% {
    transform: translate3d(448px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(2) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle2 8035ms infinite 5091ms;
  bottom: -5px; }

@keyframes particle2 {
  0% {
    transform: translate3d(102.4px, -5px, 0); }
  75% {
    opacity: 0; }
  100% {
    transform: translate3d(-384px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(3) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle3 10626ms infinite 711ms;
  bottom: -5px; }

@keyframes particle3 {
  0% {
    transform: translate3d(627.2px, -5px, 0); }
  72% {
    opacity: 0; }
  100% {
    transform: translate3d(38.4px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(4) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle4 10715ms infinite 3887ms;
  bottom: -5px; }

@keyframes particle4 {
  0% {
    transform: translate3d(1152px, -5px, 0); }
  65% {
    opacity: 0; }
  100% {
    transform: translate3d(870.4px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(5) {
  width: 2px;
  height: 2px;
  background-color: #f2705a;
  border-radius: 2px;
  box-shadow: 0 0 4px 2px #f2705a;
  animation: particle5 8834ms infinite 4808ms;
  bottom: -10px; }

@keyframes particle5 {
  0% {
    transform: translate3d(102.4px, -10px, 0); }
  89% {
    opacity: 0; }
  100% {
    transform: translate3d(-486.4px, -690px, 0);
    opacity: 0; } }

.particle:nth-child(6) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle6 8187ms infinite 771ms;
  bottom: -5px; }

@keyframes particle6 {
  0% {
    transform: translate3d(1241.6px, -5px, 0); }
  60% {
    opacity: 0; }
  100% {
    transform: translate3d(678.4px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(7) {
  width: 2px;
  height: 2px;
  background-color: #f2705a;
  border-radius: 2px;
  box-shadow: 0 0 4px 2px #f2705a;
  animation: particle7 10239ms infinite 3908ms;
  bottom: -10px; }

@keyframes particle7 {
  0% {
    transform: translate3d(512px, -10px, 0); }
  73% {
    opacity: 0; }
  100% {
    transform: translate3d(448px, -690px, 0);
    opacity: 0; } }

.particle:nth-child(8) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle8 9582ms infinite 6581ms;
  bottom: -5px; }

@keyframes particle8 {
  0% {
    transform: translate3d(384px, -5px, 0); }
  69% {
    opacity: 0; }
  100% {
    transform: translate3d(-179.2px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(9) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle9 10788ms infinite 5708ms;
  bottom: -5px; }

@keyframes particle9 {
  0% {
    transform: translate3d(153.6px, -5px, 0); }
  82% {
    opacity: 0; }
  100% {
    transform: translate3d(64px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(10) {
  width: 2px;
  height: 2px;
  background-color: #f2705a;
  border-radius: 2px;
  box-shadow: 0 0 4px 2px #f2705a;
  animation: particle10 8453ms infinite 6306ms;
  bottom: -10px; }

@keyframes particle10 {
  0% {
    transform: translate3d(704px, -10px, 0); }
  53% {
    opacity: 0; }
  100% {
    transform: translate3d(422.4px, -690px, 0);
    opacity: 0; } }

.particle:nth-child(11) {
  width: 2px;
  height: 2px;
  background-color: #f2705a;
  border-radius: 2px;
  box-shadow: 0 0 4px 2px #f2705a;
  animation: particle11 8964ms infinite 2945ms;
  bottom: -10px; }

@keyframes particle11 {
  0% {
    transform: translate3d(947.2px, -10px, 0); }
  74% {
    opacity: 0; }
  100% {
    transform: translate3d(908.8px, -690px, 0);
    opacity: 0; } }

.particle:nth-child(12) {
  width: 2px;
  height: 2px;
  background-color: #f2705a;
  border-radius: 2px;
  box-shadow: 0 0 4px 2px #f2705a;
  animation: particle12 8475ms infinite 1657ms;
  bottom: -10px; }

@keyframes particle12 {
  0% {
    transform: translate3d(1203.2px, -10px, 0); }
  97% {
    opacity: 0; }
  100% {
    transform: translate3d(614.4px, -690px, 0);
    opacity: 0; } }

.particle:nth-child(13) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle13 9074ms infinite 6773ms;
  bottom: -5px; }

@keyframes particle13 {
  0% {
    transform: translate3d(1100.8px, -5px, 0); }
  61% {
    opacity: 0; }
  100% {
    transform: translate3d(563.2px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(14) {
  width: 2px;
  height: 2px;
  background-color: #f2705a;
  border-radius: 2px;
  box-shadow: 0 0 4px 2px #f2705a;
  animation: particle14 10694ms infinite 711ms;
  bottom: -10px; }

@keyframes particle14 {
  0% {
    transform: translate3d(1190.4px, -10px, 0); }
  78% {
    opacity: 0; }
  100% {
    transform: translate3d(1113.6px, -690px, 0);
    opacity: 0; } }

.particle:nth-child(15) {
  width: 2px;
  height: 2px;
  background-color: #f2705a;
  border-radius: 2px;
  box-shadow: 0 0 4px 2px #f2705a;
  animation: particle15 8735ms infinite 7506ms;
  bottom: -10px; }

@keyframes particle15 {
  0% {
    transform: translate3d(588.8px, -10px, 0); }
  60% {
    opacity: 0; }
  100% {
    transform: translate3d(396.8px, -690px, 0);
    opacity: 0; } }

.particle:nth-child(16) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle16 10182ms infinite 2661ms;
  bottom: -5px; }

@keyframes particle16 {
  0% {
    transform: translate3d(435.2px, -5px, 0); }
  79% {
    opacity: 0; }
  100% {
    transform: translate3d(-25.6px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(17) {
  width: 2px;
  height: 2px;
  background-color: #f2705a;
  border-radius: 2px;
  box-shadow: 0 0 4px 2px #f2705a;
  animation: particle17 9686ms infinite 5971ms;
  bottom: -10px; }

@keyframes particle17 {
  0% {
    transform: translate3d(384px, -10px, 0); }
  59% {
    opacity: 0; }
  100% {
    transform: translate3d(-12.8px, -690px, 0);
    opacity: 0; } }

.particle:nth-child(18) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle18 10850ms infinite 7822ms;
  bottom: -5px; }

@keyframes particle18 {
  0% {
    transform: translate3d(985.6px, -5px, 0); }
  82% {
    opacity: 0; }
  100% {
    transform: translate3d(473.6px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(19) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle19 10975ms infinite 337ms;
  bottom: -5px; }

@keyframes particle19 {
  0% {
    transform: translate3d(332.8px, -5px, 0); }
  65% {
    opacity: 0; }
  100% {
    transform: translate3d(-217.6px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(20) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle20 10756ms infinite 7839ms;
  bottom: -5px; }

@keyframes particle20 {
  0% {
    transform: translate3d(230.4px, -5px, 0); }
  65% {
    opacity: 0; }
  100% {
    transform: translate3d(38.4px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(21) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle21 8069ms infinite 6661ms;
  bottom: -5px; }

@keyframes particle21 {
  0% {
    transform: translate3d(166.4px, -5px, 0); }
  90% {
    opacity: 0; }
  100% {
    transform: translate3d(-268.8px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(22) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle22 9467ms infinite 2179ms;
  bottom: -5px; }

@keyframes particle22 {
  0% {
    transform: translate3d(652.8px, -5px, 0); }
  61% {
    opacity: 0; }
  100% {
    transform: translate3d(627.2px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(23) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle23 8532ms infinite 788ms;
  bottom: -5px; }

@keyframes particle23 {
  0% {
    transform: translate3d(780.8px, -5px, 0); }
  74% {
    opacity: 0; }
  100% {
    transform: translate3d(243.2px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(24) {
  width: 2px;
  height: 2px;
  background-color: #f2705a;
  border-radius: 2px;
  box-shadow: 0 0 4px 2px #f2705a;
  animation: particle24 9777ms infinite 7740ms;
  bottom: -10px; }

@keyframes particle24 {
  0% {
    transform: translate3d(499.2px, -10px, 0); }
  62% {
    opacity: 0; }
  100% {
    transform: translate3d(166.4px, -690px, 0);
    opacity: 0; } }

.particle:nth-child(25) {
  width: 2px;
  height: 2px;
  background-color: #f2705a;
  border-radius: 2px;
  box-shadow: 0 0 4px 2px #f2705a;
  animation: particle25 10613ms infinite 7388ms;
  bottom: -10px; }

@keyframes particle25 {
  0% {
    transform: translate3d(140.8px, -10px, 0); }
  81% {
    opacity: 0; }
  100% {
    transform: translate3d(25.6px, -690px, 0);
    opacity: 0; } }

.particle:nth-child(26) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle26 8100ms infinite 2355ms;
  bottom: -5px; }

@keyframes particle26 {
  0% {
    transform: translate3d(729.6px, -5px, 0); }
  59% {
    opacity: 0; }
  100% {
    transform: translate3d(294.4px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(27) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle27 8368ms infinite 4557ms;
  bottom: -5px; }

@keyframes particle27 {
  0% {
    transform: translate3d(1254.4px, -5px, 0); }
  95% {
    opacity: 0; }
  100% {
    transform: translate3d(1075.2px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(28) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle28 9168ms infinite 963ms;
  bottom: -5px; }

@keyframes particle28 {
  0% {
    transform: translate3d(256px, -5px, 0); }
  75% {
    opacity: 0; }
  100% {
    transform: translate3d(-38.4px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(29) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle29 9203ms infinite 4007ms;
  bottom: -5px; }

@keyframes particle29 {
  0% {
    transform: translate3d(204.8px, -5px, 0); }
  61% {
    opacity: 0; }
  100% {
    transform: translate3d(-217.6px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(30) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle30 9943ms infinite 2850ms;
  bottom: -5px; }

@keyframes particle30 {
  0% {
    transform: translate3d(793.6px, -5px, 0); }
  58% {
    opacity: 0; }
  100% {
    transform: translate3d(576px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(31) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle31 9636ms infinite 2637ms;
  bottom: -5px; }

@keyframes particle31 {
  0% {
    transform: translate3d(345.6px, -5px, 0); }
  57% {
    opacity: 0; }
  100% {
    transform: translate3d(-230.4px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(32) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle32 8300ms infinite 5286ms;
  bottom: -5px; }

@keyframes particle32 {
  0% {
    transform: translate3d(1049.6px, -5px, 0); }
  74% {
    opacity: 0; }
  100% {
    transform: translate3d(588.8px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(33) {
  width: 2px;
  height: 2px;
  background-color: #f2705a;
  border-radius: 2px;
  box-shadow: 0 0 4px 2px #f2705a;
  animation: particle33 8904ms infinite 1292ms;
  bottom: -10px; }

@keyframes particle33 {
  0% {
    transform: translate3d(678.4px, -10px, 0); }
  82% {
    opacity: 0; }
  100% {
    transform: translate3d(102.4px, -690px, 0);
    opacity: 0; } }

.particle:nth-child(34) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle34 9329ms infinite 3253ms;
  bottom: -5px; }

@keyframes particle34 {
  0% {
    transform: translate3d(755.2px, -5px, 0); }
  74% {
    opacity: 0; }
  100% {
    transform: translate3d(179.2px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(35) {
  width: 2px;
  height: 2px;
  background-color: #f2705a;
  border-radius: 2px;
  box-shadow: 0 0 4px 2px #f2705a;
  animation: particle35 9012ms infinite 1459ms;
  bottom: -10px; }

@keyframes particle35 {
  0% {
    transform: translate3d(870.4px, -10px, 0); }
  88% {
    opacity: 0; }
  100% {
    transform: translate3d(422.4px, -690px, 0);
    opacity: 0; } }

.particle:nth-child(36) {
  width: 2px;
  height: 2px;
  background-color: #f2705a;
  border-radius: 2px;
  box-shadow: 0 0 4px 2px #f2705a;
  animation: particle36 10159ms infinite 3003ms;
  bottom: -10px; }

@keyframes particle36 {
  0% {
    transform: translate3d(614.4px, -10px, 0); }
  70% {
    opacity: 0; }
  100% {
    transform: translate3d(614.4px, -690px, 0);
    opacity: 0; } }

.particle:nth-child(37) {
  width: 2px;
  height: 2px;
  background-color: #f2705a;
  border-radius: 2px;
  box-shadow: 0 0 4px 2px #f2705a;
  animation: particle37 10991ms infinite 2683ms;
  bottom: -10px; }

@keyframes particle37 {
  0% {
    transform: translate3d(1139.2px, -10px, 0); }
  53% {
    opacity: 0; }
  100% {
    transform: translate3d(896px, -690px, 0);
    opacity: 0; } }

.particle:nth-child(38) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle38 9206ms infinite 6937ms;
  bottom: -5px; }

@keyframes particle38 {
  0% {
    transform: translate3d(908.8px, -5px, 0); }
  53% {
    opacity: 0; }
  100% {
    transform: translate3d(793.6px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(39) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle39 8205ms infinite 4185ms;
  bottom: -5px; }

@keyframes particle39 {
  0% {
    transform: translate3d(819.2px, -5px, 0); }
  79% {
    opacity: 0; }
  100% {
    transform: translate3d(524.8px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(40) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle40 9620ms infinite 7220ms;
  bottom: -5px; }

@keyframes particle40 {
  0% {
    transform: translate3d(1075.2px, -5px, 0); }
  90% {
    opacity: 0; }
  100% {
    transform: translate3d(473.6px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(41) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle41 10436ms infinite 6064ms;
  bottom: -5px; }

@keyframes particle41 {
  0% {
    transform: translate3d(1203.2px, -5px, 0); }
  55% {
    opacity: 0; }
  100% {
    transform: translate3d(678.4px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(42) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle42 8692ms infinite 5161ms;
  bottom: -5px; }

@keyframes particle42 {
  0% {
    transform: translate3d(192px, -5px, 0); }
  79% {
    opacity: 0; }
  100% {
    transform: translate3d(-140.8px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(43) {
  width: 2px;
  height: 2px;
  background-color: #f2705a;
  border-radius: 2px;
  box-shadow: 0 0 4px 2px #f2705a;
  animation: particle43 9309ms infinite 6625ms;
  bottom: -10px; }

@keyframes particle43 {
  0% {
    transform: translate3d(1228.8px, -10px, 0); }
  97% {
    opacity: 0; }
  100% {
    transform: translate3d(819.2px, -690px, 0);
    opacity: 0; } }

.particle:nth-child(44) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle44 10360ms infinite 5521ms;
  bottom: -5px; }

@keyframes particle44 {
  0% {
    transform: translate3d(947.2px, -5px, 0); }
  100% {
    opacity: 0; }
  100% {
    transform: translate3d(883.2px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(45) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle45 10290ms infinite 3633ms;
  bottom: -5px; }

@keyframes particle45 {
  0% {
    transform: translate3d(307.2px, -5px, 0); }
  88% {
    opacity: 0; }
  100% {
    transform: translate3d(115.2px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(46) {
  width: 2px;
  height: 2px;
  background-color: #f2705a;
  border-radius: 2px;
  box-shadow: 0 0 4px 2px #f2705a;
  animation: particle46 8510ms infinite 5754ms;
  bottom: -10px; }

@keyframes particle46 {
  0% {
    transform: translate3d(614.4px, -10px, 0); }
  61% {
    opacity: 0; }
  100% {
    transform: translate3d(-12.8px, -690px, 0);
    opacity: 0; } }

.particle:nth-child(47) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle47 8659ms infinite 4220ms;
  bottom: -5px; }

@keyframes particle47 {
  0% {
    transform: translate3d(51.2px, -5px, 0); }
  56% {
    opacity: 0; }
  100% {
    transform: translate3d(-345.6px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(48) {
  width: 2px;
  height: 2px;
  background-color: #f2705a;
  border-radius: 2px;
  box-shadow: 0 0 4px 2px #f2705a;
  animation: particle48 9172ms infinite 784ms;
  bottom: -10px; }

@keyframes particle48 {
  0% {
    transform: translate3d(435.2px, -10px, 0); }
  80% {
    opacity: 0; }
  100% {
    transform: translate3d(-64px, -690px, 0);
    opacity: 0; } }

.particle:nth-child(49) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle49 10345ms infinite 6524ms;
  bottom: -5px; }

@keyframes particle49 {
  0% {
    transform: translate3d(896px, -5px, 0); }
  95% {
    opacity: 0; }
  100% {
    transform: translate3d(550.4px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(50) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle50 9465ms infinite 2447ms;
  bottom: -5px; }

@keyframes particle50 {
  0% {
    transform: translate3d(870.4px, -5px, 0); }
  96% {
    opacity: 0; }
  100% {
    transform: translate3d(448px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(51) {
  width: 2px;
  height: 2px;
  background-color: #f2705a;
  border-radius: 2px;
  box-shadow: 0 0 4px 2px #f2705a;
  animation: particle51 10388ms infinite 2642ms;
  bottom: -10px; }

@keyframes particle51 {
  0% {
    transform: translate3d(665.6px, -10px, 0); }
  77% {
    opacity: 0; }
  100% {
    transform: translate3d(358.4px, -690px, 0);
    opacity: 0; } }

.particle:nth-child(52) {
  width: 2px;
  height: 2px;
  background-color: #f2705a;
  border-radius: 2px;
  box-shadow: 0 0 4px 2px #f2705a;
  animation: particle52 8069ms infinite 6000ms;
  bottom: -10px; }

@keyframes particle52 {
  0% {
    transform: translate3d(153.6px, -10px, 0); }
  75% {
    opacity: 0; }
  100% {
    transform: translate3d(-12.8px, -690px, 0);
    opacity: 0; } }

.particle:nth-child(53) {
  width: 2px;
  height: 2px;
  background-color: #f2705a;
  border-radius: 2px;
  box-shadow: 0 0 4px 2px #f2705a;
  animation: particle53 10585ms infinite 3923ms;
  bottom: -10px; }

@keyframes particle53 {
  0% {
    transform: translate3d(166.4px, -10px, 0); }
  89% {
    opacity: 0; }
  100% {
    transform: translate3d(-358.4px, -690px, 0);
    opacity: 0; } }

.particle:nth-child(54) {
  width: 2px;
  height: 2px;
  background-color: #f2705a;
  border-radius: 2px;
  box-shadow: 0 0 4px 2px #f2705a;
  animation: particle54 10877ms infinite 1234ms;
  bottom: -10px; }

@keyframes particle54 {
  0% {
    transform: translate3d(576px, -10px, 0); }
  57% {
    opacity: 0; }
  100% {
    transform: translate3d(563.2px, -690px, 0);
    opacity: 0; } }

.particle:nth-child(55) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle55 9214ms infinite 30ms;
  bottom: -5px; }

@keyframes particle55 {
  0% {
    transform: translate3d(268.8px, -5px, 0); }
  80% {
    opacity: 0; }
  100% {
    transform: translate3d(-256px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(56) {
  width: 2px;
  height: 2px;
  background-color: #f2705a;
  border-radius: 2px;
  box-shadow: 0 0 4px 2px #f2705a;
  animation: particle56 10673ms infinite 6115ms;
  bottom: -10px; }

@keyframes particle56 {
  0% {
    transform: translate3d(908.8px, -10px, 0); }
  87% {
    opacity: 0; }
  100% {
    transform: translate3d(345.6px, -690px, 0);
    opacity: 0; } }

.particle:nth-child(57) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle57 8266ms infinite 1062ms;
  bottom: -5px; }

@keyframes particle57 {
  0% {
    transform: translate3d(358.4px, -5px, 0); }
  91% {
    opacity: 0; }
  100% {
    transform: translate3d(-89.6px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(58) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle58 10184ms infinite 236ms;
  bottom: -5px; }

@keyframes particle58 {
  0% {
    transform: translate3d(217.6px, -5px, 0); }
  77% {
    opacity: 0; }
  100% {
    transform: translate3d(25.6px, -685px, 0);
    opacity: 0; } }

.particle:nth-child(59) {
  width: 2px;
  height: 2px;
  background-color: #f2705a;
  border-radius: 2px;
  box-shadow: 0 0 4px 2px #f2705a;
  animation: particle59 9948ms infinite 4998ms;
  bottom: -10px; }

@keyframes particle59 {
  0% {
    transform: translate3d(1254.4px, -10px, 0); }
  84% {
    opacity: 0; }
  100% {
    transform: translate3d(985.6px, -690px, 0);
    opacity: 0; } }

.particle:nth-child(60) {
  width: 1px;
  height: 1px;
  background-color: #f2705a;
  border-radius: 1px;
  box-shadow: 0 0 2px 1px #f2705a;
  animation: particle60 9123ms infinite 4044ms;
  bottom: -5px; }

@keyframes particle60 {
  0% {
    transform: translate3d(576px, -5px, 0); }
  79% {
    opacity: 0; }
  100% {
    transform: translate3d(268.8px, -685px, 0);
    opacity: 0; } }

#navi li a img:nth-child(1) {
  opacity: 0;
  transition: opacity 200ms; }

#navi li.current a img:nth-child(1) {
  opacity: 1 !important;
  transition: opacity 200ms; }

#sound_area .volume {
  position: relative;
  width: 30px;
  height: 46px;
  transition: opacity 400ms; }
  #sound_area .volume:hover {
    opacity: .8; }

#sound_area .volume img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 800ms; }
  #sound_area .volume img.jsCurrentVol {
    opacity: 1; }

#sound_area .button {
  display: none; }

.jsEffectAppear {
  opacity: 0;
  transition: opacity 800ms; }

body.jsAppear .jsEffectAppear {
  opacity: 1; }