@media screen and (max-width:1260px){
    .header-right, .header-left {
        display: none;
    }
}
@media screen and (max-width:1023px){
    .header {
        width: 100%;
    }
    .page-content {
        width: 768px;
    }
    .logo-game img {
        width: 330px;
    }
    .top10 {
        margin-right: 10px;
    }
    .top10 img{
        width: 200px;
    }
    .video-game {
        padding-top: 80px;
    }
    .video-div, .logo-game {
        margin-left: 10px;
    }
    .video-div img{
        width: 280px;
    }
    .main-char img {
        width: 350px;
    }
    
    ul.top-menu li {
        padding: 20px 10px;
    }
    .logo .logo-wrp div {
        padding: 16px 20px;
    }
    .logo .logo-wrp div.logo-gnt {
        padding-top: 20px;
    }
    header {
        height: 64px;
        background-size: 100% 100%;
    }
    section.main-content {
        padding-top: 60px;
    }
    .page-01-footer ul li {
        padding: 1%;
        width: 22.33%;
    }
    .page-01-footer ul li a img{
        width: 100%;
    }
    .page-01-footer {
        padding: 52px 0;
    }
    .page-02-container .page-content-left img{
        width: 350px;
    }
    .page-02-container .page-content-right img{
        width: 371px;
    }
    .page-content-slider .bx-wrapper li img {
        width: 170px;
    }
    .char-text .char-stt {
        padding-top: 20%;
        width: 100%;
        text-align: center;
    }
    .char-text .char-stt img {
        width: 160px;
        float: none;
    }
    .char-img img{
        width: 372px;
    }
    .char-void > img {
        width: 60%;
    }
    #data-koyuki .char-void img {
        width: 60%;
    }
    .void_btn img{
        width: 28px;
    }
    .void_btn {
        top: -44px;
        left: -18px;
    }
    .char-text img {
        width: 200px;
    }
    #data-koyuki .char-text .char-stt {
        padding-top: 0;
        margin-top: -5%;
    }
    #data-koyuki .char-img img {
        width: 363px;
    }
    #data-ryugen .char-text .char-stt {
        padding-top: 0;
        margin-top: -24%;
        margin-left: -40px;
    }
    #data-ryugen .char-img img {
        width: 461px;
    }
    #data-ryugen .char-img {
        margin-left: -7%;
    }
    #data-osaki .char-img img {
        width: 463px;
    }
    #data-osaki .char-text img {
        width: 194px;
    }
    #data-osaki .char-img {
        margin-left: 0;
    }
    #data-osaki .char-text .char-stt {
        margin-top: -38%;
        margin-left: 39%;
    }
    #data-osaki .char-text .char-stt img {
        width: 206px;
    }
    #data-osaki .char-text {
        padding:3% 0 0 5%;
    }
    #data-osaki .char-img {
        margin-left: 4%;
    }
    #data-ameri .char-void > img {
        width: 55%;
    }
    #data-ameri .char-img img {
        width: 425px;
    }
    #data-ameri .char-img {
        margin-left: 4.7%;
    }
    #data-ameri .char-text .char-stt {
        padding-top: 9%;
        margin-top: -22%;
    }
    #data-ameri .char-text > img{
        margin-left: 17%;
        width: 190px;
    }
    .page-04-container .page-content-left, .page-04-container .page-content-right{
        width: 100%;
    }
    .twt-box {
        padding: 3% 10%;
    }
    .about-game-box {
        width: 80%;
        padding: 0% 10% 5% 10%;
    }
    .bg-game-box {
        width: inherit;
    }
    .bg-game-box img{
        width: 100%;
    }
    .bg-game-top-ct {
        padding-left: 20%;
    }
    .about-game-box ul {
        padding-top:44%;
    }
    .page-04-container {
        background: url(../images/bg04.jpg) center top no-repeat;
        padding-bottom: 45px;
    }
    ul.footer-menu {
        width: 60%;
    }
    .des-footer {
        padding: 0 0 20px 0;
        width: 100%;
        text-align: center;
    }
    .header-content {
        padding-left: 2%;
        width: 98%;
    }
    .char-menu-list {
        margin-right: 10px;
    }
    .page-02-container {
        margin-top: 10%;
    }
}
@media screen and (max-width:910px){
    .logo {
        width: 100%;
        padding: 0;
    }
    .logo .logo-wrp div {
        padding: 16px 10px;
    }
    header {
        height: 120px;
        position: static;
        background: #350000;
    }
    section.main-content {
        padding-top: 0;
    }
    .nav-top {
        z-index: 999;
        height: 60px;
        float: left;
        background: url(../images/top_bg.png) center -33px repeat-x;
        width: 100%;
    }
}
@media screen and (min-width:767px){
    #data-okou .char-text .char-stt {
        padding-top: 8%;
    }
    .slide-header {
        padding-left: 15px;
    }
    .char-des {
        padding: 10px 0 10px 15px;
    }
    .page-content-slider3 {
        padding: 0 30px;
    }
}
@media screen and (max-width:767px){
    .page-01-footer {
        margin-top: -25px;
        position: relative;
    }
    .page-content {
        width: 480px;
    }
    .ul.top-menu li a {
        font-size: 14px;
    }
    .logo-game img {
        width: 260px;
    }
    .top10 img {
        width: 160px;
    }
    .video-game-title {
        font-size: 20px;
    }
    .video-div img {
        width: 180px;
    }
    .main-char img {
        width: 240px;
    }
    .video-game {
        padding-top: 60px;
    }
    .page-01-container {
        background-size: auto 100%;
    }
    .page-01-footer {
        padding: 15px 0;
        background-size: auto 100%;
    }
    .header-content span {
        font-size: 20px;
    }
    .header-content img {
        margin-right: 5px;
        width: 22px;
    }
    .page-02-container {
        margin-top: -10px;
    }
    .page-02-container .page-content-left img {
        width: 250px;
    }
    .page-02-container .page-content-right img {
        width: 310px;
        margin-left: -22px;
    }
    .page-02-container .page-ct-row {
        overflow-x: hidden;
    }
    .page-content-slider {
        padding: 30px;
    }
    .page-content-slider .slider-next {
        right: -30px;
        margin-top: -120px;
    }
    .page-content-slider .slider-prev {
        left: -30px;
        margin-top: -120px;
    }
    .slider-prev a, .slider-next a {
        width: 25px;
        height: 25px;
    }
    .slider-next a,.slider-prev a {
        background-size: 100% 100%;
    }
    .page-content-slider .bx-wrapper li img {
        width: 130px;
    }
    .page-content-slider2 {
        padding: 0 40px;
    }
    .slide-header {
        font-size: 18px;
        padding-left: 30px;
    }
    .page-content-slider2 .slider-prev {
        left: -34px;
        margin-top: -58px;
    }
    .page-content-slider2 .slider-next {
        right: -34px;
        margin-top: -58px;
    }
    .page-02-footer {
        padding: 20px 0 28px 0;
        background-size: auto 100%;
    }
    .char-menu-list {
        margin-right: 2%;
        width: 70%;
    }
    .page-03-container .header-content {
        width: 26%;
    }
    .button-char {
        width: 62px;
    }
    .actived .menu-actived {
        width: 63px;
    }
    .page-content-char {
        overflow: hidden;
        height: 440px;
    }
    .char-img img {
        width: 275px;
    }
    .page-content-char-bg img {
        width: auto;
        height: 440px;
    }
    .char-text {
        padding: 4% 0 0 8%;
    }
    .char-text .char-stt {
        padding-top: 60%;
    }
    .char-img {
        padding: 31% 0 0 11%;
    }
    .void_btn img {
        width: 22px;
    }
    .void_btn {
        top: -32px;
        left: -10px;
    }
    #data-koyuki .char-img img {
        width: 263px;
    }
    #data-koyuki .char-text .char-stt {
        margin-top: 20%;
    }
    #data-koyuki .char-img {
        padding: 33.9% 0 0 9%;
    }
    .char-text .char-stt img {
        width: 140px;
    }
    #data-ryugen .char-img img {
        width: 361px;
    }
    #data-ryugen .char-img {
        padding: 24.7% 0 0 6%;
    }
    #data-ryugen .char-text .char-stt img {
        width: 120px;
    }
    #data-ryugen .char-text .char-stt {
        margin-top: 3%;
        margin-left: -20%;
    }
    #data-ryugen .char-text > img{
        width: 188px;
    }
    #data-osaki .char-text > img {
        width: 170px;
    }
    #data-osaki .char-text .char-stt img {
        width: 190px;
    }
    #data-osaki .char-text .char-stt {
        margin-top: -3%;
        margin-left: 0;
    }
    #data-osaki .char-img img {
        width: 363px;
    }
    #data-osaki .char-img {
        padding: 27.3% 0 0 11%;
    }
    #data-osaki .char-img {
        margin-left: -10%;
    }
     #data-ameri .char-text {
        padding: 4% 0 0 0%;
    }
    #data-ameri .char-text .char-stt {
        margin-top: -7%;
    }
    #data-ameri .char-img img {
        width: 325px;
    }
    #data-ameri .char-img {
        padding: 26.3% 0 0 0;
        margin-left: 14.7%;
    }
    .page-content-slider3 {
        padding: 0 40px;
    }
    .char-des {
        padding: 10px 0 10px 40px;
    }
    .twt-box {
        padding: 3% 3%;
        width: 94%;
    }
    .about-game-box {
        width: 94%;
        padding: 0% 3% 0% 3%;
        margin-top: 10px;
    }
    .about-game-box ul {
        padding-top: 39%;
    }
    ul.footer-menu {
        width: 100%;
    }
    .des-footer {
        font-size: 14px;
    }
}
@media screen and (max-width:590px){
    ul.top-menu li a {
        font-size: 12px;
    }
 }
@media screen and (max-width:478px){
    #data-okou .char-text .char-stt {
        padding-top: 80%;
    }
    .header-content {
        padding-top:4px;
    }
    .page-content {
        width: 100%;
    }
    .video-game-title {
        font-size: 14px;
    }
    .video-div img {
        width: 120px;
    }
    .top10 img {
        width: 120px;
    }
    .page-02-container .page-content-left, .page-02-container .page-content-right {
        width: 96%;
        padding: 2%;
    }
    .page-02-container .page-content-left img {
        width: 100%;
    }
    .page-02-container .page-content-right img {
        width: 100%;
        margin-left: 0;
        margin-top: 20px;
    }
    .page-content-slider .slider-next, .page-content-slider .slider-prev {
        margin-top: -30%;
    }
    .page-content-slider2 .slider-next, .page-content-slider2 .slider-prev {
        margin-top: -14%;
    }
    .page-03-container .header-content {
        width: 98%;
    }
    .char-menu-list {
        margin-right: 0;
        width: 78%;
        padding: 2% 10%;
    }
    .char-menu-list ul li {
        float: left;
        width: 20%;
        padding-left: 0;
    }
    .button-char {
        width: 90%;
    }
    .inactive {
        width: 100%;
    }
    .actived .menu-actived {
        width: 100%;
    }
    .page-content-char {
        margin: 15px 0;
    }
    .char-text img {
        width: 180px;
    }
    .char-text {
        padding: 7% 0 0 3%;
    }
    .page-content-char {
        height: 440px;
        width: 320px;
        margin: 20px auto;
        float: none;
    }
    .char-void {
        width: 17.6%;
        margin-top: 4%;
    }
    .char-img img {
        width: 230px;
    }
    .char-img {
        padding: 60.5% 0 0 11%;
    }
    .char-text .char-stt {
        padding-top: 100%;
    }
    #data-koyuki .char-img img {
        width: 230px;
    }
    #data-koyuki .char-img {
        padding: 60.9% 0 0 9%;
    }
    #data-koyuki .char-text .char-stt {
        margin-top: 45%;
    }
    #data-ryugen .char-text > img {
        width: 165px;
    }
    #data-ryugen .char-img img {
        width: 330px;
    }
    #data-ryugen .char-img {
        padding: 44.7% 0 0 8%;
    }
    #data-ryugen .char-text .char-stt {
        margin-top: 28%;
        margin-left: -11%;
    }
    #data-osaki .char-text > img {
        width: 155px;
    }
    #data-osaki .char-text {
        padding: 7% 0 0 3%;
    }
    #data-osaki .char-text .char-stt {
        margin-top: 5%;
        margin-left: -20%;
    }
    #data-osaki .char-img img {
        width: 320px;
    }
    #data-osaki .char-img {
        padding: 52% 0 0 11%;
    }
    #data-ameri .char-text > img {
        margin-left: 9%;
        width: 165px;
        margin-top: 6%;
    }
    #data-ameri .char-text .char-stt {
        margin-top: 20%;
    }
    #data-ameri .char-img img {
        width: 300px;
    }
    #data-ameri .char-img {
        padding: 46.7% 0 0 0;
        margin-left: 20.7%;
    }
    .char-des {
        padding: 10px;
        font-size: 13px;
    }
    .about-game-box ul {
        font-size: 13px;
    }
    .page-03-container {
        background-size: auto 100%;
    }
}
@media screen and (max-width:460px){
    .about-game-box ul {
        padding-top: 37%;
        line-height: 35px;
    }
}
.xs-menu-btn {
    display: none;
    position: absolute;
    right: 5px;
    cursor: pointer;
    z-index: 10;
}
@media screen and (max-width:440px){
    header.xs-menu {
        height: 60px;
        position: static;
        background: #350000;
    }
    .xs-menu .nav-top {
        width: 65px;
        right: 0;
    }
    .top-menu {
        display: none;
    }
    .top-menu.footer-menu {
        display: block;
    }
    .xs-menu-btn {
        display: block;
    }
    .xs-menu .nav-top {
        background: none;
        float: inherit;
        margin-top: 60px;
        position: absolute;
    }
    .xs-menu ul.top-menu li {
        padding: 12px 10px;
        float: left;
        width: 250px;
        border-top:1px solid #440101;
    }
    .xs-menu ul.top-menu {
        float: right;
        width: 270px;
        background: #290000 url(../images/top_bg.png) center bottom repeat-x;
        padding-bottom: 10px;
    }
    .xs-menu ul.top-menu li a {
        font-size: 20px;
    }
    .xs-menu ul.top-menu li a span {
        display: none;
    }
    .actived_menu {
        display: block;
    }
}
/* ---fix css for iphone 6, 6s, 6+  */
@media screen and (max-width:415px){
    .twt-box iframe.twitter-timeline {
        width: 390px !important;
    }
    .page-content-slider2 .slider-next, .page-content-slider2 .slider-prev {
        margin-top: -18%;
    }
 }
 @media screen and (max-width:413px){
    .twt-box iframe.twitter-timeline {
        width: 100% !important;
    }
 }
 @media screen and (max-width:376px){
    .twt-box iframe.twitter-timeline {
        width: 352px !important;
    }
 }
  @media screen and (max-width:374px){
    .twt-box iframe.twitter-timeline {
        width: 100% !important;
    }
 }
/* --- end fix css for iphone 6, 6s, 6+  */
@media screen and (max-width:380px){
    .top10-xs {
        display: block;
    }
    .top10 {
        display: none;
    }
    .video-game {
        padding-top: 0px;
        margin-left: 10px;
    }
    .main-char{
        padding-top: 48%;
    }
    .page-01-footer ul li {
        width: 48%;
        float: left;
    }
    .about-game-box ul li span {
        width: 50px;
    }
    .about-game-box ul {
        font-size: 13px;
    }
    .about-game-box ul {
        padding-top: 34%;
        line-height: 33px;
    }
    .bg-game-box {
        display: none;
    }
    .bg-game-box.bg-game-box-xs {
        display: block;
    }
    .bg-game-top-ct {
        padding-left: 0;
    }
    ul.top-menu.footer-menu li {
        padding: 10px 2%;
        width: 96%;
        text-align: center;
    }
    .bg-game-box img {
        height: 320px;
    }
    .logo-wrp div  img{
        width: 140px;
    }
    .logo-wrp div.logo-gnt img {
        width: 130px;
    }
}
@media screen and (max-width: 330px){
    .logo-wrp div img {
        width: 130px;
    }
    .logo-wrp div.logo-gnt img {
        width: 110px;
    }
}
@media screen and (max-width:320px){
    .page-content-slider3 .slider-prev {
        left: -13%;
    }
    .page-content-slider3 .slider-next {
        right: -13%;
    }
    .page-content-slider .slider-next, .page-content-slider .slider-prev {
        margin-top: -42%;
    }
    .about-game-box ul {
        padding-top: 37%;
    }
    .page-content-char {
        margin: 0 auto;
    }
    .char-menu-list {
        margin-right: 0;
        width: 96%;
        padding: 2%;
    }
    .page-content-slider2 .slider-next, .page-content-slider2 .slider-prev {
        margin-top: -20%;
    }
    .logo-game {
        padding-top: 10px;
    }
    .logo-game img {
        width: 240px;
    }
    .bg-game-top-ct {
        padding-left: 0;
    }
    .bg-game-box img {
        height: auto;
    }
}