@import url(https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css);
@import url(https://fonts.googleapis.com/earlyaccess/Fredoka+One.css);
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, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after {
  content: '';
  content: none; }

q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

input[type="text"], input[type="password"], input[type="submit"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-indent: .01px;
  text-overflow: "";
  border-radius: 0;
  border: none;
  outline: none; }

button, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-indent: .01px;
  text-overflow: "";
  border-radius: 0;
  border: none;
  outline: none; }

a {
  text-decoration: none;
  color: inherit !important;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit !important;
  text-align: inherit;
  line-height: inherit !important;
  cursor: pointer;
  outline: none; }

div, a, input, button {
  -webkit-tap-highlight-color: transparent; }

::-webkit-input-placeholder {
  line-height: normal; }

html {
  margin-top: 0 !important; }

body {
  width: 100%;
  background-image: url(../img/bg_body.png);
  background-repeat: repeat; }

img {
  border: none;
  display: block; }

div.radio-group {
  padding: 110px 100px 60px 100px;
  padding: 10px; }
  div.radio-group input {
    position: absolute;
    left: 0;
    outline: none; }
  div.radio-group div {
    position: relative; }
  div.radio-group label {
    padding: 20px 70px;
    border: solid 1px #aaaaaa;
    margin-left: -1px;
    width: 201px;
    height: 74px;
    cursor: pointer;
    padding: 20px 50px;
    float: left;
    margin: 0;
    width: 53px;
    height: 10px;
    border: none; }
  div.radio-group .ios label {
    background-image: url(../img/btn_ios_off.png);
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    background-image: url(../img/btn_ios_off_sp.png);
    background-size: 100% 100%;
    margin-left: 5%;
    float: left; }
    div.radio-group .ios label.checked {
      background-image: url(../img/btn_ios_on.png);
      background-repeat: no-repeat;
      background-image: url(../img/btn_ios_on_sp.png);
      background-size: 100% 100%;
      margin-left: 5%;
      float: left; }
  div.radio-group .android label {
    left: 370px;
    background-image: url(../img/btn_and_off.png);
    background-repeat: no-repeat;
    position: absolute;
    left: 50%;
    background-image: url(../img/btn_and_off_sp.png);
    background-size: 100% 100%;
    margin-right: 5%;
    float: right; }
    div.radio-group .android label.checked {
      background-image: url(../img/btn_and_on.png);
      background-repeat: no-repeat;
      background-image: url(../img/btn_and_on_sp.png);
      background-size: 100% 100%;
      margin-right: 5%;
      float: right; }

#container {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box; }

.cf:before {
  content: "";
  display: table; }
.cf:after {
  content: "";
  display: table;
  clear: both; }

.main {
  overflow-x: hidden;
  width: 100%; }

header {
  position: relative;
  width: 1100px;
  min-height: 720px;
  margin: 0 auto 48px; }
  header .item {
    width: 100%;
    opacity: 0; }
  header h1 {
    width: 53%;
    height: 53%;
    padding: 0; }
    header h1 img {
      width: 100%;
      height: 100%; }

.appinfo {
  position: absolute;
  top: 615px;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  width: 910px;
  margin: auto; }
  .appinfo .install_area {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 40px 0; }
    .appinfo .install_area li {
      list-style: none; }
      .appinfo .install_area li img {
        width: 95%; }

#gnav {
  width: 100%;
  background: url("../img/gnav_bg.png") no-repeat center top, url("../img/gnav_bg_tile.png") repeat-x;
  margin-bottom: 60px;
  box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.18); }
  #gnav ul {
    display: flex;
    width: 1000px;
    margin: 0 auto;
    padding: 0; }
    #gnav ul li {
      margin: 0;
      padding: 0;
      list-style: 0; }
      #gnav ul li a {
        display: block;
        width: 250px;
        height: 90px; }
        #gnav ul li a:hover {
          opacity: 0; }
      #gnav ul li:nth-child(1) {
        display: none; }
      #gnav ul li:nth-child(2) {
        background: url("../img/gnav4_o.png") no-repeat; }
        #gnav ul li:nth-child(2) a {
          background: url("../img/gnav4.png") no-repeat; }
      #gnav ul li:nth-child(3) {
        background: url("../img/gnav1_o.png") no-repeat; }
        #gnav ul li:nth-child(3) a {
          background: url("../img/gnav1.png") no-repeat; }
      #gnav ul li:nth-child(4) {
        background: url("../img/gnav2_o.png") no-repeat; }
        #gnav ul li:nth-child(4) a {
          background: url("../img/gnav2.png") no-repeat; }
      #gnav ul li:nth-child(5) {
        background: url("../img/gnav3_o.png") no-repeat; }
        #gnav ul li:nth-child(5) a {
          background: url("../img/gnav3.png") no-repeat; }

section {
  width: 1000px;
  margin: 0 auto; }
  section h1 {
    margin-bottom: 9px; }
  section#system {
    margin-bottom: 60px; }
    section#system .system_wrap {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      height: 382px;
      padding: 33px 27px 27px;
      margin-bottom: 18px;
      background: url("../img/bg_system.png") no-repeat center top; }
      section#system .system_wrap h2 {
        font-size: 170%;
        font-family: "Rounded Mplus 1c", sans-serif;
        font-weight: 900;
        text-align: center;
        color: #ff7781; }
        section#system .system_wrap h2.title_pc {
          display: block; }
        section#system .system_wrap h2.title_sp {
          display: none; }
      section#system .system_wrap div.wrap_inner {
        display: flex;
        padding: 18px 0 24px 0; }
        section#system .system_wrap div.wrap_inner p {
          width: 450px; }
          section#system .system_wrap div.wrap_inner p img {
            width: 100%; }
        section#system .system_wrap div.wrap_inner div {
          padding: 0 24px; }
          section#system .system_wrap div.wrap_inner div h3 {
            padding: 18px 0;
            font-size: 154%;
            font-family: "Rounded Mplus 1c", sans-serif;
            font-weight: 900;
            color: #feb601; }
        section#system .system_wrap div.wrap_inner.system1 div h3 {
          color: #feb601; }
        section#system .system_wrap div.wrap_inner.system2 div h3 {
          color: #279DE8; }
        section#system .system_wrap div.wrap_inner.system3 div h3 {
          color: #FF87A0; }
    section#story {
    width: 100%;
    min-height: 829px;
    margin-bottom: 60px;
    background: url("../img/bg_story.jpg") no-repeat center top;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    section#story #sp_title {
    display: none;
    }
    section#story div.inner {
      position: relative;
      width: 1000px;
      margin: 0 auto; }
      section#story div.inner h1 {
        position: absolute;
        top: 140px;
        right: 0;
        width: 500px; }
        section#story div.inner h1 img {
          width: 100%; }
        section#story div.inner h1.dpc {
          display: block; }
      section#story div.inner p.dsp {
        display: none; }
  section#character {
    margin-bottom: 36px; }
    section#character ul {
      *zoom: 1;
      margin: 3% 0 0 -6%; }
      section#character ul:after {
        content: "";
        display: block;
        clear: both; }
      section#character ul li {
        float: left;
        width: 50%;
        list-style: none; }
        section#character ul li:nth-child(3), section#character ul li:nth-child(4) {
          margin-top: -69px; }
        section#character ul li img {
          width: 583px;
          height: 437px; }
  section#news {
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    width: 1020px;
    height: 503px;
    margin: 0 auto 60px; }
    section#news div.news_wrap,
    section#news div.twitter {
      position: relative;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      width: 1001px;
      padding: 66px 54px;
      background: url("../img/bg_twitter_large.png") no-repeat; }
      section#news div.news_wrap h1,
      section#news div.twitter h1 {
        margin-bottom: 24px; }
      section#news div.news_wrap dl,
      section#news div.twitter dl {
        height: 410px;
        padding: 0 0 24px 0;
        overflow-y: scroll; }
        section#news div.news_wrap dl dt,
        section#news div.twitter dl dt {
          font-family: 'Fredoka One', cursive; }
        section#news div.news_wrap dl dd,
        section#news div.twitter dl dd {
          margin: 0 0 18px;
          padding: 12px 0 18px 0;
          font-family: "Rounded Mplus 1c", sans-serif;
          line-height: 1.6;
          font-size: 85%;
          background: url("../img/border.png") no-repeat center bottom; }
          section#news div.news_wrap dl dd:last-child,
          section#news div.twitter dl dd:last-child {
            background: none; }
      section#news div.news_wrap p.btn_follow,
      section#news div.twitter p.btn_follow {
        position: absolute;
        top: 70px;
        right: 56px;
        display: inline-block;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 98px;
        background: #FF87A0; }
        section#news div.news_wrap p.btn_follow a,
        section#news div.twitter p.btn_follow a {
          display: block;
          padding: 5px 24px; }
          section#news div.news_wrap p.btn_follow a:hover,
          section#news div.twitter p.btn_follow a:hover {
            background: red; }

.item {
  position: absolute;
  width: 100%;
  opacity: 0; }
  .item:nth-child(1) {
    animation: example 0.5s ease 0.5s 1 forwards; }
  .item:nth-child(2) {
    animation: example 0.5s ease 1s 1 forwards; }
  .item:nth-child(3) {
    animation: example 0.5s ease 1.5s 1 forwards; }
  .item:nth-child(4) {
    animation: example 0.5s ease 2s 1 forwards; }
  .item:nth-child(5) {
    animation: example 0.5s ease 2.5s 1 forwards; }
  .item:nth-child(6) {
    animation: example 0.5s ease 3s 1 forwards; }
  .item:nth-child(7) {
    animation: example 0.5s ease 3s 1 forwards; }
    .item:nth-child(7) img {
      display: block;
      width: 80%;
      margin: 7% 0 0 12%; }

@-webkit-keyframes example {
  100% {
    opacity: 1; } }
@keyframes example {
  100% {
    opacity: 1; } }
footer {
  position: relative;
  padding: 90px 0;
  width: 100%;
  text-align: center;
  background: url("../img/bg_footer.jpg") #ff87a0 no-repeat center top; }
  footer ul {
    display: flex;
    width: 1000px;
    margin: 0 auto;
    padding: 0; }
    footer ul li {
      width: 25%;
      padding: 0 0.5%; }
      footer ul li img {
        width: 100%;
        height: auto; }
      footer ul li a:hover img {
        opacity: 0.8; }
  footer .to_top {
    position: absolute;
    cursor: pointer;
    right: 5%;
    top: -38px; }
  footer .copy {
    margin-top: 36px;
    font-size: 93%;
    font-weight: 600;
    color: #fff;
    font-family: "Rounded Mplus 1c", sans-serif;
    line-height: 1.6; }
    footer .copy span {
      display: none; }