@media screen and (min-width:320px) and ( max-width:768px) {

  /** BROWSER ALERT **/
  #androidBrowser_alert{
    position:fixed;
    top:0; left:0;
    height:100%; width:100%;
    background:black;
    opacity:0.80;
  }

  #androidBrowser_alert div.wrap{
    position:fixed;
    top:50%; left:50%;
    margin-top:-150px; margin-left:-160px;
    background:#313131;
    max-width:320px;
  }

  #androidBrowser_alert div.con{
    border:solid 1px #fff;
    padding:20px;
    line-height:150%;
    font-size:14px;
    color:#fff;
  }

  #androidBrowser_alert a.go2chrome{
    display:block;
    text-align:center;
    background:black;
    margin-top: 10px;
    padding:10px;
  }


  /** FRAME WORK **/
  body {
    background: none;
  }
  .pattern-wrap {
    background-size: 25%;
  }

  /** HEADER **/
  header {
    background: url("../img/sp-header_char.png") center 30px no-repeat,
                url("../img/bg/sp-entire_bg_2_01.png") center top no-repeat;
    background-size: 130%, 100%;
    height: auto;
    padding: 2% 0 25% 0;
    margin: 0 0 -10% 0;
    font-size: 100%;
  }
  .content-wrap {
    width: 100%;
  }
  .cont-title {
    width: 100%;
  }


/* PAGE TOP LINE */
  .header-top-line {
    width: 100%;
    text-align: center;
  }
    .title-box {
      float: none;
    }
    h1 {
      font-size: 4vw;
      font-weight: 400;
    }
    .sns-box {
      display: none;
    }

  /* LOGO */
  .logo-img {
    margin: 60% auto 8% 5%;
    width: 90%;
    height: auto;
  }

  .app_icon-tweet-box {
    width: 100%;
    margin: 0 auto;
  }
    .app_icon-box {
      float: none;
      background: url("../img/bg/download.png") top center no-repeat;
      background-size: 100%;
      width: 100%;
      height: 70vw;
      margin: 0 auto 20%;
    }
      .app_icon-box div,
      .app_icon-box div img {
        width: 48vw;
        height: auto;
      }
      .badge-appstore {
        top: 37%;
        left: 46%;
      }
      .badge-googleplay {
        top: 60%;
        left: 46%;
      }
    /* TWITTER */
    .tweet-box {
      float: none;
      margin-top: 6%;
      background: none;
      height: inherit;
      width: auto;
    }
      .tweet_frame-box-ctrl {
        width: 93%;
        background: url("../img/bg/twitter.png") center bottom no-repeat;
        background-size: 100%;
        margin-top: -18px;
      }
        .tweet_frame-box {
          height: inherit;
          width: 100%!important;
          max-width: 100%!important;
          padding: 10px 13px 9px 2px;
        }
          .twitter-timeline {
             height: 320px!important;
             width: 100vw!important;
          }

  /** MOVIE **/
  .movie-box {
    background: url("../img/bg/movie.png") center 6vw no-repeat,
                url("../img/bg/sp-entire_bg_2_02.png") center 90% no-repeat;
    background-size: 95%,100vw;
    padding: 0 0 20% 0;
    margin: 0 auto 5%;
  }

  /** PRE-REGISTRATION **/
  .preregistration-box {
    background: url("../img/bg/sp-entire_bg_2_03.png") center bottom no-repeat;
    background-size: 100vw;
    height: auto;
    margin: 0;
    padding-bottom: 1%;
  }
    .preregistration-box-ctrl {
      background: url("../img/bg/sp-campaign.png") center top no-repeat;
      background-size: 96vw;
      width: 100%;
      height: 140vw;
      margin: -6.5% auto 15% auto;
      padding: 9% 0 12vw 0;
    }
    .preregistration-box-text_01 {
    width: 95%;
    height: 22vw;
    background: url("../img/preregistration/sp-text_01.png") center top no-repeat;
    background-size: contain;
    }
    .preregistration-box-text_02 {
    width: 100%;
    height: 40vw;
    background: url("../img/preregistration/sp-text_02.png") center top no-repeat;
    background-size: contain;
    }

  .preregistration-icon-box {
    position: relative;
    background: url("../img/bg/campaign_app_icon_bg.png") center top no-repeat;
    background-size: 100vw;
    width: 100vw;
    height: 52vw;
    margin: 0 auto;
  }
    .preregistration-icon-box div img,
    .preregistration-icon-box div {
      width: 38.8vw;
      height: 34vw;
    }
    .preregistration-icon-box .app-icon {
      top: 1%;
      left: 30.7%;
    }
    .preregistration-icon-box .preregistration-twitter {
      top: 33.5%;
      left: 0.8%;
    }
    .preregistration-icon-box .preregistration-top10 {
      top: 33.5%;
      left: 60.5%;
    }


  /** HOW TO **/
  .howto-box {
    background: url("../img/bg/sp-entire_bg_2_03.png") center bottom no-repeat;
    background-size: 100vw;
    padding-bottom: 30%;
    margin-bottom: -5%;
    height: auto;
    font-weight: 600;
    line-height: 1.2;
  }
    .howto-box-ctrl {
      background: none;
      padding: 0;
    }
      .howto-box h3 img {
        width: 60%;
        height: auto;
      }
      .howto-box h3 img.title-howto_01 {
        width: 35%;
        height: auto;
      }
      .howto-box-text_01 {
        width: 100%;
        height: 30.5vw;
        background: url("../img/howto/sp-text.png") 0 0 no-repeat;
        background-size: contain;
        margin: 0 auto;
      }
      .howto-box_01 {
        background: url("../img/bg/sp-howto_01.png") center top no-repeat;
        background-size: cover;
        width: 100%;
        font-size: 3.5vw;
        margin: 0;
      }
        .title-howto_01 {
          margin: 5% 0 0 46%;
        }
        .howto-box-text_02 {
          margin: 0% 2% 0 31%;
          padding-bottom: 5%;
        }
      .howto-box_02 {
        background: url("../img/bg/sp-howto_02.png") center top no-repeat;
        background-size: cover;
        width: 100%;
        font-size: 3.5vw;
        margin: 0 0 0 0;
      }
        .title-howto_02 {
          margin: 3% 0 0 33%;
        }
        .howto-box-text_03 {
          margin: 0% 3% 0 31%;
          padding-bottom: 5%;
        }
      .howto-box_03 {
        background: url("../img/bg/sp-howto_03.png") center top no-repeat;
        background-size: cover;
        width: 100%;
        font-size: 3.5vw;
        margin: 0 0 0 0;
      }
        .title-howto_03 {
          margin: 3% 0 0 33%;
        }
        .howto-box-text_04 {
          margin: 0% 3% 0 31%;
          padding-bottom: 5%;
        }
      .howto-box_04 {
        background: url("../img/bg/sp-howto_04.png") center top no-repeat;
        background-size: cover;
        width: 100%;
        font-size: 3.5vw;
        margin: 0 0 0 0;
      }
        .title-howto_04 {
          margin: 5% 0 0 35%;
        }
        .howto-box-text_05 {
          margin: 0% 2% 0 31%;
          padding-bottom: 4%;
        }


  /** CHARACTOR **/
  .char-box {
    margin: -10% 0 15% 0;
  }
    .char_oda,
    .char_tokugawa,
    .char_hashiba {
      z-index: 5;
    }
      .char_oda {
        top: -5vw;
        left: 0;
        width: 60vw;
      }
      .char_tokugawa {
        top: 86vw;
        right: 0;
        width: 50vw;
      }
      .char_hashiba {
        bottom: 8vw;
        left: 0;
        width: 40vw;
      }
    .char-box-ctrl {
      background: none;
      width: 100%;
      height: auto;
      margin-top: 7%;
    }
      .azumi-box {
        background: url("../img/bg/sp-char_01.png") center top no-repeat;
        background-size: cover;
        width: 100%;
        height: 92vw;
        font-size: 3.5vw;
      }
        .title_oda {
          margin: 9vw 0 10vw 47vw;
          width: 50vw;
          height: auto;
        }
        .text_oda {
          margin: 14vw 2vw 10vw 50vw;
          position: relative;
          z-index: 10;
        }
      .fumika-box {
        background: url("../img/bg/sp-char_02.png") center top no-repeat;
        background-size: cover;
        width: 100%;
        height: 85vw;
        font-size: 3.5vw;
      }
        .title_tokugawa {
          margin: 7vw 10vw 10vw 4vw;
          width: 50vw;
          height: auto;
        }
        .text_tokugawa {
          margin: 12vw 37vw 10vw 2vw;
          position: relative;
          z-index: 10;
        }
      .tenma-box {
        background: url("../img/bg/sp-char_03.png") center top no-repeat;
        background-size: cover;
        width: 100%;
        height: 93vw;
        font-size: 3.5vw;
        margin-top: 2vw;
      }
        .title_hashiba {
          margin: 9vw 0 10vw 47vw;
          width: 50vw;
          height: auto;
        }
        .text_hashiba {
          margin: 16vw 2vw 0 29vw;
          position: relative;
          z-index: 10;
        }

  /** BTM DOWNLOAD BOX **/



  /** FOOTER **/
    footer {
      width: 100%;
      background: url("../img/bg/sp-entire_bg_04.png") center top no-repeat;
      background-size: 100vw;
      font-size: 3vw;
      font-weight: 400;
      margin: 0;
      padding: 13vw 0 2% 0;
    }
      .sns-list-title {
        margin-bottom: 2vw;
        font-weight: 600;
      }
      .footer-nav {
        margin: 5vw 0;
      }
      .spec-list {
        margin: 5vw auto;
      }
        .sns-list-box img {
          width: 23vw;
          height: auto;
        }
      .copyright-google {
        letter-spacing: initial;
      }

}