.visible-sp {
  display: none;
  display: block; }

#container {
  background: url("../img/bg_head.png") no-repeat;
  background-size: contain; }

header {
  width: 98%;
  min-width: 320px;
  min-height: 380px;
  margin: 0 1%; }
  header .item {
    width: 100%;
    opacity: 0; }
    header .item img {
      width: 100%; }

#rwd_navi #navToggle {
  position: fixed;
  top: 0;
  right: 0;
  width: 50px;
  min-height: 50px;
  background: url("../img/sp/gnav_sp.png") no-repeat center top;
  -webkit-background-size: 50px 100px;
  -o-background-size: 50px 100px;
  background-size: 50px 100px;
  z-index: 100; }
#rwd_navi #gnav {
  display: none; }
#rwd_navi.openNav {
  display: block !important; }
#rwd_navi.openNav #navToggle {
    width: 50px;
    min-height: 50px;
    background: url("../img/sp/gnav_sp.png") no-repeat center bottom;
    -webkit-background-size: 50px 100px;
    -o-background-size: 50px 100px;
    background-size: 50px 100px;
    z-index: 100; }
  #rwd_navi.openNav #gnav {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    background: #FF87A0;
    z-index: 10;
    -webkit-box-shadow: 0 -11px 20px 20px rgba(0, 0, 0, 0.3);
    box-shadow: 0 -11px 20px 20px rgba(0, 0, 0, 0.3); }
    #rwd_navi.openNav #gnav ul {
      display: block;
      width: auto;
      margin: auto;
      padding: 50px 0; }
      #rwd_navi.openNav #gnav ul li {
        text-align: center;
        background: none; }
        #rwd_navi.openNav #gnav ul li a {
          width: 100%;
          height: 60px; }
          #rwd_navi.openNav #gnav ul li a:hover {
            opacity: 1; }
        #rwd_navi.openNav #gnav ul li:nth-child(1) a {
            background: url("../img/sp/gnav1.png") no-repeat center #ff93a9;
            -webkit-background-size: 141px 60px;
            -o-background-size: 141px 60px;
            background-size: 141px 60px; }
        #rwd_navi.openNav #gnav ul li:nth-child(2) a {
          background: url("../img/sp/gnav5.png") no-repeat center;
          -webkit-background-size: 141px 60px;
          -o-background-size: 141px 60px;
          background-size: 141px 60px; }
        #rwd_navi.openNav #gnav ul li:nth-child(3) a {
          background: url("../img/sp/gnav2.png") no-repeat center #ff93a9;
          -webkit-background-size: 141px 60px;
          -o-background-size: 141px 60px;
          background-size: 141px 60px; }
        #rwd_navi.openNav #gnav ul li:nth-child(4) a {
          background: url("../img/sp/gnav3.png") no-repeat center;
          -webkit-background-size: 141px 60px;
          -o-background-size: 141px 60px;
          background-size: 141px 60px; }
        #rwd_navi.openNav #gnav ul li:nth-child(5) a {
          background: url("../img/sp/gnav4.png") no-repeat center #ff93a9;
          -webkit-background-size: 141px 60px;
          -o-background-size: 141px 60px;
          background-size: 141px 60px; }

.appinfo {
  position: absolute;
  width: 100%;
  margin: 0px auto 0;
  top: 220px;
  display: block;
  z-index: 2; }
  .appinfo .btn {
    width: 75%;
    margin: 0 auto; }
    .appinfo .btn img {
      width: 100%; }
  .appinfo .install_area {
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 90%;
    margin: 0 5%;
    padding: 2% 0; }
    .appinfo .install_area li {
      width: 49%; }
      .appinfo .install_area li img {
        width: 100%; }

section {
  width: 100%; }
  section h1 img {
    width: 100%; }
  section#system div.system_wrap {
    height: 490px;
    background: url("../img/sp/bg_system_sp.png") no-repeat center bottom;
    -webkit-background-size: 431px 528px;
    -o-background-size: 431px 528px;
    background-size: 431px 528px; }
    section#system div.system_wrap:last-child {
      height: 470px; }
    section#system div.system_wrap h2 {
      text-align: center;
      font-size: 154%;
      line-height: 1.2; }
      section#system div.system_wrap h2.title_pc {
        display: none; }
        section#system div.system_wrap h2.title_sp {
            font-size: 130%;
            display: block;
        }
    section#system div.system_wrap .wrap_inner {
      display: block; }
      section#system div.system_wrap .wrap_inner p {
        width: 100%; }
        section#system div.system_wrap .wrap_inner p img {
          width: 100%; }
      section#system div.system_wrap .wrap_inner div {
        padding: 0; }
        section#system div.system_wrap .wrap_inner div h3 {
          font-size: 116%; }
  section#story {
    position: relative;
    width: 100%;
    min-height: 350px; }
    section#story h1#sp_title {
      position: absolute;
      top: 0px;
      display: block; }
    section#story div.inner {
        position: static;
        width: 100%;
        padding: 252px 0 24px;
        background: url("../img/sp/bg_story_sp.jpg") no-repeat center 40px white;
        -webkit-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }
        section #story div.inner h1 {
        margin: auto; }
        section#story div.inner h1 img {
          width: 100%; }
        section#story div.inner h1.dpc {
          display: none; }
      section#story div.inner p.dsp {
        position: static;
        display: block;
        width: 92%;
        margin: 0 auto; }
        section#story div.inner p.dsp img {
          width: 100%; }
  section#character ul li {
    float: none;
    width: 95%;
    margin: 0 0 0 5%; }
    section#character ul li:nth-child(2) {
      margin-top: -11%; }
    section#character ul li:nth-child(3), section#character ul li:nth-child(4) {
      margin-top: -10%; }
    section#character ul li img {
      width: 100%;
      height: auto; }
  section#news {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 92%;
    height: auto;
    margin: 0 auto 36px; }
    section#news div {
      padding: 66px 45px; }
      section#news div.news_wrap, section#news div.twitter {
        background: url("../img/bg_frame.png") no-repeat;
        -webkit-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
        width: 100%;
        padding: 60px 40px; }
        section#news div.news_wrap iframe, section#news div.twitter iframe {
          height: 270px !important; }
        section#news div.news_wrap h1, section#news div.twitter h1 {
          width: 60px;
          height: auto; }
        section#news div.news_wrap dl, section#news div.twitter dl {
          height: 240px; }
        section#news div.news_wrap p.btn_follow, section#news div.twitter p.btn_follow {
          top: 60px;
          right: 40px; }

footer {
  margin: 60px 0 0 0;
  padding: 60px 0; }
  footer ul {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 50%; }
    footer ul li {
      width: 100%;
      padding: 0 0 4%; }
  footer .to_top {
    top: -100px;
    right: 0;
    left: 0;
    margin: auto; }
  footer .copy {
    font-size: 62%; }
    footer .copy span {
      display: inline; }