html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
body {
  line-height: 1;
  color: #000;
  background: #fff;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: separate;
  border-spacing: 0;
  vertical-align: middle;
}
caption,
th,
td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}
a img {
  border: none;
}
.clearfix,
.cut__list {
  zoom: 1;
}
.clearfix:before,
.cut__list:before,
.clearfix:after,
.cut__list:after {
  content: "";
  display: table;
}
.clearfix:after,
.cut__list:after {
  clear: both;
}
html.fixed {
  position: fixed;
  top: 0;
}
body {
  font-family: 'Helvetica Neue', 'Segoe UI', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
}
#Loading {
  position: fixed;
  z-index: 700;
  width: 100%;
  height: 100%;
  background-color: #000;
  background-image: url("../../assets/images/sp/loading/loading__bg.gif");
  background-repeat: repeat;
  text-align: center;
}
#Loading .ttl {
  position: relative;
  display: block;
  margin: 45% auto 5px;
}
#Loading .anm {
  position: relative;
  display: block;
  margin: 0 auto 12px;
  -ms-transform: scale(0.8);
  transform: scale(0.8);
}
#Loading .txt {
  position: relative;
  display: block;
  margin: 0 auto;
  display: none;
}
.firstTime #Loading .ttl {
  margin: 40% auto 5px;
}
.firstTime #Loading .txt {
  display: block;
}
#Content {
  position: relative;
  visibility: hidden;
  width: 100%;
  font-size: 14px;
  letter-spacing: 0.1em;
  padding-top: 30px;
}
.common-nav,
.character,
.cut {
  position: relative;
  z-index: 100;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
main {
  width: 100%;
  margin: 0 auto;
  padding-bottom: 25px;
}
.bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.image-pc {
  display: none !important;
}
.common-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 500;
  height: 30px;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}
.common__btn-sound {
  display: none;
}
.header__btn-switch {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 42px;
  height: 42px;
}
.common-footer {
  position: absolute;
  z-index: 300;
  width: 100%;
  height: 25px;
  background-color: #e60112;
  font-size: 10px;
  color: #fff;
  letter-spacing: 0;
  margin-top: 250px;
}
.common-footer a {
  color: #fff;
  text-decoration: none;
}
.common-footer__list-links {
  width: 300px;
  margin: 0 auto;
  padding: 6px 0 0;
}
.common-footer__item {
  float: left;
  margin-right: 8px;
}
.common-footer__item:last-of-type {
  margin-right: 0;
}
.common-footer__copy {
  display: none;
}
.common-nav {
  position: fixed;
  bottom: -270px;
  z-index: 200;
  width: 100%;
  height: 350px;
  border-bottom: 20px solid #e3f5fb;
  background-size: 320px 350px;
  background-image: url("../../assets/images/sp/common/common-nav__bg.png");
  background-position: center top;
  transition: 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275) transform;
  pointer-events: none;
}
.common-nav__btn {
  pointer-events: auto;
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 50px;
  height: 50px;
  margin-left: 90px;
}
.common-nav.visible {
  -ms-transform: translateY(-262px);
  transform: translateY(-262px);
}
.common-nav.show-footer {
  position: absolute;
}
.common-nav.show-footer.visible {
  -ms-transform: translateY(0);
  transform: translateY(0);
  transition: none;
}
.common-nav__list {
  padding-top: 113px;
}
.common-nav__list li {
  height: 40px;
}
.common-nav__list a {
  display: block;
  pointer-events: auto;
  width: 100%;
  height: 100%;
}
.promo__btn-switch {
  position: relative;
  width: 174px;
  height: 66px;
  margin: 0 auto;
}
.promo__btn-switch a {
  pointer-events: auto;
  display: block;
  width: 174px;
  height: 66px;
  background: url("../images/sp/index/promo__btn-switch.png") no-repeat 0 -66px;
  background-size: cover;
}
.promo__btn-switch a.odd {
  background-position: 0 -66px;
}
.career-newds3 .common-nav,
.career-ds3 .common-nav,
.career-wiiu .common-nav {
  position: relative;
  bottom: 0;
}
.career-newds3 .common-footer,
.career-ds3 .common-footer,
.career-wiiu .common-footer {
  margin-top: 0;
}
.career-newds3 .common__btn-sound a,
.career-ds3 .common__btn-sound a,
.career-wiiu .common__btn-sound a {
  display: none;
}
body {
  background-color: #fff;
}
main {
  width: 100%;
}
#Content {
  background: url("../images/sp/character/character__bg-3ds.png") center top no-repeat, url("../images/sp/character/cut__bg-mat.png") center top 440px no-repeat, url("../images/sp/common/common__bg-check.png") repeat;
  background-size: 320px 460px, 300px 1282px, 316px 301px;
}
/*--------------------------------------------
CHARACTER SECTION
--------------------------------------------*/
.character {
  margin-bottom: 30px;
  text-align: center;
}
.character__ttl-main {
  padding-top: 20px;
  margin-bottom: 18px;
}
.character__txt-main {
  margin-bottom: 18px;
}
/*--------------------------------------------
CUT SECTION
--------------------------------------------*/
.cut {
  margin: 9px auto 40px;
}
.cut__cnt {
  box-sizing: border-box;
  padding: 20px 0 80px;
  text-align: center;
}
.cut__ttl-main {
  margin-bottom: 10px;
}
.cut__wrp-video {
  position: relative;
  margin: 0 auto 30px;
}
.cut__cnt-video {
  position: relative;
  top: 0;
  left: 0;
  z-index: 600;
  width: 100%;
  height: 100%;
}
.cut__target {
  width: 100%;
  height: 100%;
}
.cut__video {
  box-sizing: border-box;
  position: relative;
  z-index: 110;
  width: 280px;
  height: 163px;
  margin: 0 auto;
  padding: 7px 0 0 0;
  background-image: url("../images/sp/character/cut__bg-video.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 2px 2px;
}
.cut__video canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.cut__btns {
  display: block;
  height: 30px;
  padding-top: 12px;
}
.cut__btn-left,
.cut__btn-right {
  display: block;
  z-index: 110;
  float: left;
  width: 50%;
  height: 100%;
}
.cut__btn-chara {
  display: block;
  overflow: hidden;
}
.cut__btn-chara img {
  display: block;
  width: 100%;
  height: auto;
}
.cut__btn-arrow {
  display: block;
}
.cut__btn-close {
  display: none;
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 110;
}
.cut__list {
  position: relative;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -o-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  width: 240px;
  margin: 0 auto 10px;
}
.cut__list li {
  float: left;
  margin: 0 18px 16px 0;
}
.cut__list li:nth-of-type(3n) {
  margin-right: 0;
}
.cut__frame-selecting {
  position: absolute;
  top: -10px;
  left: -6px;
}
/*--------------------------------------------
Nintendo 3DS
--------------------------------------------*/
.career-newds3,
.career-ds3,
.career-wiiu {
  background-image: url("../images/sp/common/common__bg-check.png");
  background-size: 316px 301px;
  background-position: 0 0;
  background-repeat: repeat;
}
.career-newds3 #Content,
.career-ds3 #Content,
.career-wiiu #Content {
  background-image: url("../images/sp/character/character__bg-3ds.png");
  background-size: 320px 460px;
  background-position: center top;
  background-repeat: no-repeat;
}
.career-newds3 #Content .character__ttl-main,
.career-ds3 #Content .character__ttl-main,
.career-wiiu #Content .character__ttl-main {
  padding-top: 0;
}
.career-newds3 #Content .cut__cnt,
.career-ds3 #Content .cut__cnt,
.career-wiiu #Content .cut__cnt {
  background-image: url("../images/sp/character/cut__bg-mat-3ds.png");
  background-size: 294px 1090px;
  background-position: center top;
  background-repeat: no-repeat;
}
.career-newds3 #Content .common-footer,
.career-ds3 #Content .common-footer,
.career-wiiu #Content .common-footer {
  margin-top: 0;
}
/*--------------------------------------------
Android
--------------------------------------------*/
.career-android {
  background-image: url("../images/sp/common/common__bg-check.png");
  background-size: 316px 301px;
  background-position: 0 0;
  background-repeat: repeat;
}
.career-android #Content {
  background-image: url("../images/sp/character/character__bg-3ds.png");
  background-size: 320px 460px;
  background-position: center top;
  background-repeat: no-repeat;
}
.career-android #Content .character__ttl-main {
  padding-top: 0;
}
.career-android #Content .cut__cnt {
  background-image: url("../images/sp/character/cut__bg-mat.png");
  background-size: 300px 1282px;
  background-position: center top;
  background-repeat: no-repeat;
}
/*--------------------------------------------
MODAL SECTION
--------------------------------------------*/
.switch {
  position: absolute;
  left: 10px;
  top: 60px;
  display: none;
  z-index: 400;
}
.switch__bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: calc(100% + 80px);
  height: 100%;
  background-color: rgba(255,255,255,0.5);
}
.switch__btn-close {
  position: absolute;
  top: 10px;
  right: 10px;
}
.switch__cnt-wrp {
  position: relative;
  display: block;
  background-image: url("../images/sp/index/switch-bg-board.png");
  width: 300px;
  height: 750px;
  margin: 0 auto 0;
  padding-top: 90px;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  box-sizing: border-box;
}
.switch__ttl-main {
  margin-bottom: 18px;
}
.switch__chara {
  overflow: hidden;
  width: 220px;
  height: 85px;
  margin: 0 auto 8px;
  padding-top: 12px;
  background-image: url("../images/sp/index/switch__bg-device.png");
  background-size: 220px 170px;
  background-position: 0 0;
  animation: keys-switch__chara 1200ms steps(2) infinite;
  box-sizing: border-box;
}
@keyframes keys-switch__chara {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 170px;
  }
}
.switch__txt-main {
  margin-bottom: 12px;
}
.switch__wrp-howto {
  width: 245px;
  height: 250px;
  margin: 0 auto 24px;
  padding-top: 57px;
  background-image: url("../images/sp/index/switch__bg-howto.png");
  background-size: 245px 250px;
  background-position: 0 0;
  background-repeat: no-repeat;
  box-sizing: border-box;
}
.switch__ttl-howto {
  margin-bottom: 10px;
  text-indent: 22px;
}
.switch__cnt-howto {
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -o-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 163px;
  margin: 0 auto 30px;
  padding-left: 32px;
}
.switch__item-howto {
  margin: 0 0 7px 0;
}
.switch__item-howto:first-of-type {
  margin-right: 8px;
}
.switch__txt-solo {
  margin-bottom: 12px;
}
.switch__wrp-solo {
  width: 198px;
  margin: 0 auto;
}
.switch__img-solo01,
.switch__img-solo02 {
  float: left;
  margin-right: 10px;
}
.switch__img-solo02 {
  width: 110px;
  height: 81px;
  margin: 0 auto 24px;
  padding: 6px 0 0 4px;
  background-image: url("../images/sp/index/switch__img-solo02.png");
  background-size: 110px 81px;
  background-position: 0 0;
  background-repeat: no-repeat;
  box-sizing: border-box;
  text-align: center;
}
.switch__btn {
  display: block;
  position: absolute;
  right: 26px;
  bottom: -20px;
}
