@import url(common/layout_en.css);

#contents .box {
    margin-top: 5.0rem;
    padding-top: 2.5rem;
}
#contents .box:first-child {
    margin-top: 4.4rem;
}

.character .box dt p {
    width: calc(100% - 10.8rem);
}
.character .box dd {
    width: calc(100% - 14rem);
}
.character .box:nth-child(even) dt {
    background-color: #dc6e5a;
}
.character .box:nth-child(even) dt p {
    float: right;
}
.character .box:nth-child(even) dd {
    float: right;
}
.chara {
    position: absolute;
    z-index: 1;
}
#chara01 {
    width: 10.6rem;
    top: -6.2rem;
    right: 1.6rem;
}
#chara02 {
    width: 9.05rem;
    top: -7.0rem;
    left: 1.65rem;
}
#chara03 {
    width: 10.9rem;
    top: -3.76rem;
    right: 0.6rem;
    z-index: 5;
}
#chara03 .inner {
    position: relative;
    display: block;
}
#chara03 .inner .btn {
    cursor: pointer;
}
#chara03 .inner .icon {
    width: auto;
    position: absolute;
    top: -10px;
    right: 80px;
}
#chara04 {
    width: 9.4rem;
    top: -3.6rem;
    left: 1.4rem;
}
#chara05 {
    width: 7.55rem;
    top: -5.4rem;
    right: 1.65rem;
}
#chara06 {
    width: 8.2rem;
    top: -5.6rem;
    left: 2.05rem;
}

#contents .thumbs .box {
    margin-top: 1.2rem;
    padding: 1.2rem 0 1.2rem 1.2rem;
    position: relative;
}
#contents .thumbs .box:first-child {
    margin-top: 5rem;
}
#develop #wallpaper {
}
#develop #wallpaper li {
    width: 44%;
    float: left;
    margin-left: 4%;
}
#develop #wallpaper li a {
    border: solid 2px rgba(255, 255, 255, 1);
    transition: transform 0.4s ease;
    display: block;
}
#develop #wallpaper li a:hover {
    border: solid 2px rgba(250, 250, 0, 1);
    display: block;
}

/* 3DS */
.ds .character .box dd {
    width: 14rem;
}


#contents .box .message {
    position: absolute;
    bottom : 25px;
    right: 80px;
    z-index: 3;
    width: 240px;
    padding: 15px 20px 15px 15px;
    border:2px solid #fff;
    background: rgba(0, 0, 0, 0.85);
    border-radius: 8px;
    box-shadow: 3px 3px 14px #000;
    display: none;
}
@media screen and (max-width: 420px) {
    #contents .box .message {
        line-height: 1.5;
        width: auto;
        bottom: 30px;
        padding-right: 40px;
    }
    #contents .box .message br {
        display: none;
    }
}

#chara03 .inner .icon {
  animation: animationFrames linear 1.2s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  -webkit-animation: animationFrames linear 1.2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animationFrames linear 1.2s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -o-animation: animationFrames linear 1.2s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -ms-animation: animationFrames linear 1.2s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
}

@keyframes animationFrames{
  0% {
    transform:  rotate(0deg) scaleX(0.8) scaleY(0.8) ;
  }
  10% {
    transform:  rotate(-3deg) scaleX(0.5) scaleY(0.5) ;
  }
  20% {
    transform:  rotate(-3deg) scaleX(0.5) scaleY(0.5) ;
  }
  30% {
    transform:  rotate(3deg) scaleX(0.8) scaleY(0.8) ;
  }
  40% {
    transform:  rotate(-3deg) scaleX(0.8) scaleY(0.8) ;
  }
  50% {
    transform:  rotate(3deg) scaleX(0.8) scaleY(0.8) ;
  }
  60% {
    transform:  rotate(-3deg) scaleX(0.8) scaleY(0.8) ;
  }
  70% {
    transform:  rotate(3deg) scaleX(0.8) scaleY(0.8) ;
  }
  80% {
    transform:  rotate(-3deg) scaleX(0.8) scaleY(0.8) ;
  }
  90% {
    transform:  rotate(3deg) scaleX(0.8) scaleY(0.8) ;
  }
  100% {
    transform:  rotate(0deg) scaleX(0.8) scaleY(0.8) ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    -moz-transform:  rotate(0deg) scaleX(0.8) scaleY(0.8) ;
  }
  10% {
    -moz-transform:  rotate(-3deg) scaleX(0.5) scaleY(0.5) ;
  }
  20% {
    -moz-transform:  rotate(-3deg) scaleX(0.5) scaleY(0.5) ;
  }
  30% {
    -moz-transform:  rotate(3deg) scaleX(0.8) scaleY(0.8) ;
  }
  40% {
    -moz-transform:  rotate(-3deg) scaleX(0.8) scaleY(0.8) ;
  }
  50% {
    -moz-transform:  rotate(3deg) scaleX(0.8) scaleY(0.8) ;
  }
  60% {
    -moz-transform:  rotate(-3deg) scaleX(0.8) scaleY(0.8) ;
  }
  70% {
    -moz-transform:  rotate(3deg) scaleX(0.8) scaleY(0.8) ;
  }
  80% {
    -moz-transform:  rotate(-3deg) scaleX(0.8) scaleY(0.8) ;
  }
  90% {
    -moz-transform:  rotate(3deg) scaleX(0.8) scaleY(0.8) ;
  }
  100% {
    -moz-transform:  rotate(0deg) scaleX(0.8) scaleY(0.8) ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    -webkit-transform:  rotate(0deg) scaleX(0.8) scaleY(0.8) ;
  }
  10% {
    -webkit-transform:  rotate(-3deg) scaleX(0.5) scaleY(0.5) ;
  }
  20% {
    -webkit-transform:  rotate(-3deg) scaleX(0.5) scaleY(0.5) ;
  }
  30% {
    -webkit-transform:  rotate(3deg) scaleX(0.8) scaleY(0.8) ;
  }
  40% {
    -webkit-transform:  rotate(-3deg) scaleX(0.8) scaleY(0.8) ;
  }
  50% {
    -webkit-transform:  rotate(3deg) scaleX(0.8) scaleY(0.8) ;
  }
  60% {
    -webkit-transform:  rotate(-3deg) scaleX(0.8) scaleY(0.8) ;
  }
  70% {
    -webkit-transform:  rotate(3deg) scaleX(0.8) scaleY(0.8) ;
  }
  80% {
    -webkit-transform:  rotate(-3deg) scaleX(0.8) scaleY(0.8) ;
  }
  90% {
    -webkit-transform:  rotate(3deg) scaleX(0.8) scaleY(0.8) ;
  }
  100% {
    -webkit-transform:  rotate(0deg) scaleX(0.8) scaleY(0.8) ;
  }
}

@-o-keyframes animationFrames {
  0% {
    -o-transform:  rotate(0deg) scaleX(0.8) scaleY(0.8) ;
  }
  10% {
    -o-transform:  rotate(-3deg) scaleX(0.5) scaleY(0.5) ;
  }
  20% {
    -o-transform:  rotate(-3deg) scaleX(0.5) scaleY(0.5) ;
  }
  30% {
    -o-transform:  rotate(3deg) scaleX(0.8) scaleY(0.8) ;
  }
  40% {
    -o-transform:  rotate(-3deg) scaleX(0.8) scaleY(0.8) ;
  }
  50% {
    -o-transform:  rotate(3deg) scaleX(0.8) scaleY(0.8) ;
  }
  60% {
    -o-transform:  rotate(-3deg) scaleX(0.8) scaleY(0.8) ;
  }
  70% {
    -o-transform:  rotate(3deg) scaleX(0.8) scaleY(0.8) ;
  }
  80% {
    -o-transform:  rotate(-3deg) scaleX(0.8) scaleY(0.8) ;
  }
  90% {
    -o-transform:  rotate(3deg) scaleX(0.8) scaleY(0.8) ;
  }
  100% {
    -o-transform:  rotate(0deg) scaleX(0.8) scaleY(0.8) ;
  }
}

@-ms-keyframes animationFrames {
  0% {
    -ms-transform:  rotate(0deg) scaleX(0.8) scaleY(0.8) ;
  }
  10% {
    -ms-transform:  rotate(-3deg) scaleX(0.5) scaleY(0.5) ;
  }
  20% {
    -ms-transform:  rotate(-3deg) scaleX(0.5) scaleY(0.5) ;
  }
  30% {
    -ms-transform:  rotate(3deg) scaleX(0.8) scaleY(0.8) ;
  }
  40% {
    -ms-transform:  rotate(-3deg) scaleX(0.8) scaleY(0.8) ;
  }
  50% {
    -ms-transform:  rotate(3deg) scaleX(0.8) scaleY(0.8) ;
  }
  60% {
    -ms-transform:  rotate(-3deg) scaleX(0.8) scaleY(0.8) ;
  }
  70% {
    -ms-transform:  rotate(3deg) scaleX(0.8) scaleY(0.8) ;
  }
  80% {
    -ms-transform:  rotate(-3deg) scaleX(0.8) scaleY(0.8) ;
  }
  90% {
    -ms-transform:  rotate(3deg) scaleX(0.8) scaleY(0.8) ;
  }
  100% {
    -ms-transform:  rotate(0deg) scaleX(0.8) scaleY(0.8) ;
  }
}