@charset "utf-8";

/* CSS Document */

a {
    text-decoration: none!important;
}


/*画面幅が1025px以上の場合（PC）に適用するCSSを記入*/

@media screen and (min-width: 1025px) {
    .pc {
        display: block !important;
    }
    .sp {
        display: none !important;
    }
    .page_feature {
        position: relative;
        overflow: hidden;
        width: 100%;
    /*
        margin: 0 -12px;
        padding: 0 12px;
    */
    }
    body {
        display: block;
        margin: 0;
    }
    ul {
        list-style-type: none;
        padding-left: 0;
    }
    li {
        width: 200px;
    }
    .float {
        width: 1200px;
        margin: auto;
        overflow: hidden;
    }
    .float li {
        float: left;
    }
    .gn_movie {
        display: block;
        padding: 12px 0;
        text-align: center;
    }
    .gn_movie:hover {
        background-color: rgb(143, 11, 83);
    }
    .gn_text {
        font-weight: bold;
        text-decoration: none;
        color: #fff;
        font-size: 24px;
    }
    .nav {
        background: #ffc5dd;
    }
    .showFlag {
        display: none;
    }
    .global-nav {
        height: 60px;
        background: #fc35a2;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 200;
        width: 100%;
        transition: .3s;
        transform: translateY(-100%);
        opacity: 100%;
    }
    .is-show {
        transform: translateY(0);
    }
    .scrollBTN {
        width: 150px;
        position: fixed;
        bottom: 24px;
        right: -200px;
        z-index: 100;
    }
    .bg_image {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: -99;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        background: url(../img/bg.jpg);
        background-attachment: fixed;
        background-position: bottom center, center;
        background-size: cover;
        background-repeat: repeat-y, no-repeat;
    }
    .page_feature .feature_nav {
        position: absolute;
        opacity: 1;
    }
    .header_global div {
        width: 100%;
    }
    .header_global li {
        position: absolute;
        top: 0;
        left: 50%;
        display: -webkit-inline-box;
        display: -webkit-inline-flex;
        display: -ms-inline-flexbox;
        display: inline-flex;
        width: 100px;
        height: 58px;
    }
    nav .header_global li a {
        display: inline-block;
        width: 80%;
    }
    .global_header {
        width: 100vw;
    }
    .page_feature .bg_header {
        position: relative;
        z-index: 10;
        width: 100%;
        height: 1080px;
        background: url(../img/fv/fv_bg.jpg) no-repeat top center/cover;
        /*
        background-attachment: fixed;
        background-position: bottom center, center;
        background-size: cover;
        background-repeat: repeat-y, no-repeat;
        */
    }
    .page_feature .bg_effect {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: url(../../public/img/bg_effect_01.png), url(../../public/img/bg_effect_02.png), url(../../public/img/bg_effect_03.png);
        -webkit-animation: effect 25s linear infinite;
        animation: effect 25s linear infinite;
        pointer-events: none;
        z-index: 100;
    }
    .sec_bar {
        position: relative;
        width: 100%;
        height: 17px;
        z-index: 10;
        background: url(../img/section_bar.png) no-repeat top center/cover;
        text-align: center;
    }
    .sec_color {
        position: relative;
        width: 100%;
        height: 6px;
        z-index: 10;
        background-color: #2e2e2e;
        text-align: center;
    }
    .pos_center {
        margin-top: 0px;
        width: 100%;
        text-align: center;
        opacity: 0;
        -webkit-transition: all 1.5s;
        transition: all 1.5s;
        -webkit-transform: translate3d(0, 50px, 0);
        -ms-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0);
    }
    .pos_center.slideIn {
        opacity: 1 !important;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    .page_feature .btn-pagetop {
        position: fixed;
        bottom: 5px;
        left: 50%;
        z-index: 50;
        display: none;
        overflow: hidden;
        margin-left: 396px;
        text-indent: -99px;
    }
    .page_feature .btn-pagetop:before {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 193px;
        height: 100px;
        background: url(../img/btn_pagetop_01.png) 0 0 no-repeat;
        content: '';
        opacity: 1;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
    .page_feature .btn-pagetop:hover:before {
        opacity: 1;
    }
    .harepai .feature_contents {
        display: block;
    }
    /* FV start*/
    .harepai .fv_area {
        position: absolute;
        width: 1920px;
        height: 100%;
        margin: auto;
        right: 0;
        left: 0;
    }
    .harepai .fv_txt {
        position: absolute;
        width: 100vw;
        margin: auto;
        right: 0;
        left: 0;
        z-index: 100;
        pointer-events: none;
    }
    .harepai .fv_chara {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        margin: auto;
        pointer-events: none;
    }
    .harepai .fv_logo {
        position: absolute;
        bottom: 6%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 100;
        pointer-events: none;
    }
    .harepai .fv_serial {
        position: absolute;
        width: 436px;
        height: 125px;
        bottom: 14%;
        margin: auto;
        right: 0;
        left: 0;
        transform: translateX(-110%);
    }
    .harepai .fv_btn {
        position: absolute;
        width: 504px;
        height: 447px;
        bottom: 14%;
        margin: auto;
        right: 0;
        left: 0;
        transform: translateX(95%);
    }
    /* FV end*/
    /* movie start*/
    .harepai .promotionMovie {
        width: 994px;
        height: 562px;
        margin: 0 auto;
        text-align: center;
        opacity: 0;
        -webkit-transition: all 1.5s;
        transition: all 1.5s;
        -webkit-transform: translate3d(0, 50px, 0);
        -ms-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0);
    }
    .harepai .promotionMovie.slideIn {
        opacity: 1 !important;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    .feature_contents .bg_promo {
        position: relative;
        z-index: 10;
        width: 100%;
        height: 760px;
        background-attachment: fixed;
        background-position: bottom center, center;
        background-size: cover;
        background-repeat: repeat-y, no-repeat;
    }
    .video-btn {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 40px;
        cursor: pointer;
    }
    /* movie end*/
    /* intro start*/
    .feature_contents .bg_intro {
        position: relative;
        z-index: 10;
        width: 100%;
        height: 996px;
        background: url(../img/intro/intro_bg.jpg) no-repeat top center/cover;
        background-attachment: fixed;
        background-position: bottom center, center;
        background-size: cover;
        background-repeat: repeat-y, no-repeat;
    }
    .harepai .intro {
        position: absolute;
        width: 1880px;
        height: 77%;
        top: 0%;
        z-index: -1;
        text-align: center;
        right: 0;
        left: 0;
        margin: 0 auto;
        opacity: 0;
        -webkit-transition: all 1.5s;
        transition: all 1.5s;
        -webkit-transform: translate3d(0, 50px, 0);
        -ms-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0);
    }
    .harepai .introCard {
        position: absolute;
        perspective: 400px;
    }
    .intro_ef {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        width: 100%;
    }
    .harepai .intro.slideIn {
        opacity: 1 !important;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    .harepai .intro_text {
        width: 100%;
        position: absolute;
        top: 42%;
        z-index: 12;
        opacity: 0;
        text-align: center;
    }
    .harepai .intro_text.slideIn {
        opacity: 1 !important;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    /* intro end*/
    /* chara start*/
    .chara_bg {
        position: relative;
        z-index: 10;
        width: 100%;
        height: 760px;
        background: url(../img/character/chara_frame.png) no-repeat;
        background-position: top, center;
    }
    .harepai .character_common {
        position: relative;
        margin: 0 auto;
        text-align: center;
        opacity: 0;
        -webkit-transition: all 1.5s;
        transition: all 1.5s;
        -webkit-transform: translate3d(0, 50px, 0);
        -ms-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0);
    }
    .harepai .character_common.slideIn {
        opacity: 1 !important;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    .character_common ul {
        position: absolute;
    }
    .character_common .custom-thumb {
        position: absolute;
        right: 0;
        bottom: 12%;
        left: 0;
        z-index: 12;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
        -ms-flex-align: center;
        width: 1020px;
        margin: auto;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .custom-thumb li {
        position: relative;
        width: 128px;
    }
    .custom-thumb img {
        width: 124px;
        height: 105px;
    }
    .chara-gray {
        position: absolute;
        top: 0;
        left: 0;
    }
    .custom-thumb .active img.chara-gray {
        opacity: 1 !important;
    }
    .contents {
        position: absolute;
        width: 1061px;
        height: 649px;
        right: 0;
        left: 0;
        margin: auto;
    }
    .onAnime {
        width: 980px !important;
        height: 857px;
    }
    .slideIn .onAnime div {
        opacity: 1;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    .charaN {
        position: absolute;
        top: 36px;
        left: 42%;
        z-index: 12;
    }
    .charaName {
        position: absolute;
        top: 180px;
        left: 130px;
        z-index: 12;
    }
    .charaTxt {
        position: absolute;
        top: 340px;
        left: 130px;
        z-index: 12;
    }
    /* chara end*/
    .harepai .system_common {
        position: relative;
        width: 100%;
        height: auto;
        margin: 0 auto;
        -webkit-transition: all 1.5s;
        transition: all 1.5s;
        -webkit-transform: translate(0, 50px);
        -ms-transform: translate(0, 50px);
        transform: translate(0, 50px);
    }
    /* event start*/
    .harepai .event {
        position: relative;
        width: 100%;
        margin: 0 auto;
    }
    .feature_contents .bg_event01 {
        position: relative;
        z-index: 10;
        width: 100%;
        height: 979px;
        background: url(../img/event/enent_bg01.jpg) no-repeat top center/cover;
        background-attachment: fixed;
        background-position: bottom center, center;
        background-size: cover;
        background-repeat: repeat-y, no-repeat;
    }
    .feature_contents .event_contents01 {
        position: absolute;
        top: 8%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 10;
    }
    .feature_contents .event_txt01 {
        position: absolute;
        bottom: 4%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 12;
    }
    .feature_contents .bg_event02 {
        position: relative;
        z-index: 10;
        width: 100%;
        height: 979px;
        background: url(../img/event/enent_bg02.jpg) no-repeat top center/cover;
        background-attachment: fixed;
        background-position: bottom center, center;
        background-size: cover;
        background-repeat: repeat-y, no-repeat;
    }
    .feature_contents .event_contents02 {
        position: absolute;
        top: 12%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 10;
    }
    .feature_contents .event_txt02 {
        position: absolute;
        bottom: 2%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 12;
    }
    .feature_contents .bg_event03 {
        position: relative;
        z-index: 10;
        width: 100%;
        height: 979px;
        background: url(../img/event/enent_bg03.jpg) no-repeat top center/cover;
        background-attachment: fixed;
        background-position: bottom center, center;
        background-size: cover;
        background-repeat: repeat-y, no-repeat;
    }
    .feature_contents .event_contents03 {
        position: absolute;
        top: 16%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 10;
    }
    .feature_contents .event_txt03 {
        position: absolute;
        bottom: 4%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 12;
    }
    .feature_contents .bg_event04 {
        position: relative;
        z-index: 10;
        width: 100%;
        height: 979px;
        background: url(../img/event/enent_bg04.jpg) no-repeat top center/cover;
        background-attachment: fixed;
        background-position: bottom center, center;
        background-size: cover;
        background-repeat: repeat-y, no-repeat;
    }
    .feature_contents .event_contents04 {
        position: absolute;
        top: 14%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 10;
    }
    .feature_contents .event_txt04 {
        position: absolute;
        bottom: 4%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 12;
    }
    .feature_contents .bg_event05 {
        position: relative;
        z-index: 10;
        width: 100%;
        height: 979px;
        background: url(../img/event/enent_bg05.jpg) no-repeat top center/cover;
        background-attachment: fixed;
        background-position: bottom center, center;
        background-size: cover;
        background-repeat: repeat-y, no-repeat;
    }
    .feature_contents .event_contents05 {
        position: absolute;
        top: 14%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 10;
    }
    .feature_contents .event_txt05 {
        position: absolute;
        bottom: 4%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 12;
    }
    /* event end*/
    /* serial start*/
    .harepai .serial_space {
        position: relative;
        text-align: center;
        right: 0;
        left: 0;
        margin: auto;
        width: 1061px;
    }
    .harepai .serial_text {
        position: absolute;
        top: 14%;
        right: 0;
        left: 0;
        margin: auto;
        width: 442px;
    }
    .harepai .serial_code {
        position: absolute;
        right: 0;
        left: 0;
        margin: auto;
        width: 100%;
        font-size: 50px;
        top: 44%;
        color: #532f1c;
    }
    .harepai .serial_desc {
        position: absolute;
        right: 0;
        left: 0;
        margin: auto;
        width: 100%;
        font-size: 20px;
        top: 56%;
        color: #b09267;
    }
    /* コピーボタン */
    .copy_btn {
        position: absolute;
        width: 50%!important;
        bottom: 30%;
        right: 0;
        left: 0;
        padding: 12px 0;
        margin-left: auto!important;
        margin-right: auto!important;
        color: #ffffff;
        font-weight: bold;
        background: #ad7456;
        border: solid 2px #532f1c;
        border-radius: 3px;
        transition: .4s;
        text-align: center;
    }
    .copy_btn:hover {
        background: #ffffff;
        color: #000000;
    }
    .copy_btn:hover {
        cursor: pointer;
    }
    /* serial end*/
    /* avgames start*/
    .harepai .banner_space {
        position: relative;
        text-align: center;
        right: 0;
        left: 0;
        margin: auto;
        width: 1048px;
    }
    .harepai .banner {
        position: absolute;
        text-align: center;
        right: 0;
        left: 0;
        margin: auto;
        width: 640px;
    }
    /* avgames end*/
    .harepai .info {
        top: 240px;
        left: 50%;
        z-index: 12;
        width: 1089px;
        height: 885px;
        margin: 0 auto;
        background: url(../img/twitter/twitter_frame.png) 0 0 no-repeat;
        box-sizing: border-box;
    }
    .harepai .twitter-frame .info-twitter {
        right: 0;
        left: 0;
        margin: auto;
        width: 780px;
        padding: 120px 10px 10px 10px;
    }
    /* js harepai start*/
    .bx-wrapper {
        position: absolute;
        width: 1000px;
        right: 0;
        left: 0;
        margin: auto;
    }
    .bx-wrapper .bx-controls-direction a {
        width: 35px !important;
        height: 80px !important;
    }
    .bx-viewport {
        overflow: visible !important;
        width: 1061px !important;
        height: 649px !important;
    }
    .bx-wrapper .bx-prev {
        right: 42% !important;
        left: auto !important;
        background: url(../img/character/chara_arrow_L.png) no-repeat !important;
        background-size: 35px 80px !important;
    }
    .bx-wrapper .bx-next {
        right: 0% !important;
        left: auto !important;
        background: url(../img/character/chara_arrow_R.png) no-repeat !important;
        background-size: 35px 80px !important;
    }
    /* js harepai end*/
    .footer {
        position: relative;
        width: 100%;
        height: 110px;
        background-color: rgb(42 82 156);
    }
    .logo {
        position: absolute;
        top: 7%;
        right: 50%;
        transform: translateX(-90%);
    }
    .company {
        position: absolute;
        top: 35%;
        left: 50%;
    }
}


/*画面幅が767px以下の場合（スマホ）に適用するCSSを記入*/

@media screen and (max-width: 599px) {
    img {
        width: 100%;
        height: auto;
    }
    .pc {
        display: none !important;
    }
    .sp {
        display: block !important;
    }
    .phone {
        display: block !important;
    }
    .tablet {
        display: none !important;
    }
    .page_feature {
        position: relative;
        overflow: hidden;
        width: 100%;
        /*
        margin: 0 -12px;
        padding: 0 12px;
        */
    }
    body {
        min-width: initial;
        display: block;
        margin: 0;
    }
    ul {
        list-style-type: none;
        padding-left: 0;
    }
    li {
        width: 200px;
    }
    .float {
        width: 1200px;
        margin: auto;
        overflow: hidden;
    }
    .float li {
        float: left;
    }
    .bg_image {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: -99;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        background: url(../img/bg.jpg);
        background-attachment: fixed;
        background-position: bottom center, center;
        background-size: cover;
        background-repeat: repeat-y, no-repeat;
    }
    .page_feature .bg_header {
        position: relative;
        z-index: 10;
        width: 100vw;
        height: 146vw;
        background: url(../img/sp/fv/fv_bg.jpg) no-repeat top center/cover;
        text-align: center;
    }
    /* FV start*/
    .harepai .fv_txt {
        position: absolute;
        width: 100vw;
        margin: auto;
        right: 0;
        left: 0;
        z-index: 100;
    }
    .harepai .fv_logo {
        position: absolute;
        top: 10%;
        width: 65vw;
        margin: auto;
        right: 0;
        left: 0;
        z-index: 100;
    }
    .harepai .fv_chara01 {
        position: absolute;
        width: 92vw;
        top: 20%;
        margin: auto;
        right: 0;
        left: 0;
    }
    .harepai .fv_chara02 {
        position: absolute;
        width: 65vw;
        top: 61%;
        margin: auto;
        right: 0;
        left: 0;
    }
    /*
    .harepai .fv_serial {
        position: absolute;
        width: 436px;
        height: 125px;
        bottom: 14%;
        left: 50%;
        transform: translateX(-120%);
    }
    */
    .harepai .fv_btn {
        position: absolute;
        width: 70vw;
        right: 0;
        left: 0;
        margin: auto;
        bottom: 0%;
    }
    /* FV end*/
    .sec_bar {
        position: relative;
        width: 100%;
        height: 8px;
        z-index: 10;
        background: url(../img/section_bar.png) no-repeat top center/cover;
        text-align: center;
    }
    /* movie start*/
    .harepai .promotionMovie {
        width: 90vw;
        margin: 0 auto;
        text-align: center;
        opacity: 0;
        -webkit-transition: all 1.5s;
        transition: all 1.5s;
        -webkit-transform: translate3d(0, 50px, 0);
        -ms-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0);
    }
    .harepai .promotionMovie.slideIn {
        opacity: 1 !important;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    .feature_contents .bg_promo {
        position: relative;
        z-index: 10;
        width: 100%;
        background: url(../img/movie/movie_bg.jpg) no-repeat top center/cover;
        background-attachment: fixed;
        background-position: bottom center, center;
        background-size: cover;
        background-repeat: repeat-y, no-repeat;
    }
    /*
    .video-btn {
        content: "";
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:40px;
        cursor: pointer;
    }
    */
    /* movie end*/
    /* intro start*/
    .feature_contents .bg_intro {
        position: relative;
        z-index: 10;
        overflow: hidden;
        width: 100%;
        height: 128vw;
        background: url(../img/sp/intro/intro_bg.jpg) no-repeat top center/cover;
        background-attachment: fixed;
        background-position: bottom center, center;
        background-size: cover;
        background-repeat: repeat-y, no-repeat;
    }
    .harepai .intro {
        width: 100%;
        height: 100%;
        position: relative;
        top: 0;
        z-index: 12;
        text-align: center;
        margin: 0 auto;
        opacity: 0;
        -webkit-transition: all 1.5s;
        transition: all 1.5s;
        -webkit-transform: translate3d(0, 50px, 0);
        -ms-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0);
    }
    .harepai .introCard {
        position: absolute;
        width: 100%;
        perspective: 500px;
    }
    .intro_ef {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        width: 100%;
    }
    .harepai .intro.slideIn {
        opacity: 1 !important;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    .harepai .intro_text {
        width: 70vw;
        position: absolute;
        right: 0;
        left: 0;
        margin: auto;
        top: 44%;
        z-index: 12;
        opacity: 0;
        text-align: center;
    }
    .harepai .intro_text.slideIn {
        opacity: 1 !important;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    /* intro end*/
    /* chara start*/
    .chara_bg {
        position: relative;
        z-index: 10;
        width: 100vw;
        height: 61vw;
        background: url(../img/character/chara_frame.png) no-repeat;
        background-size: contain;
        background-position: top, center;
    }
    .harepai .character_common {
        position: relative;
        margin: 0 auto;
        text-align: center;
        opacity: 0;
        -webkit-transition: all 1.5s;
        transition: all 1.5s;
        -webkit-transform: translate3d(0, 50px, 0);
        -ms-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0);
    }
    .harepai .character_common.slideIn {
        opacity: 1 !important;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    .character_common ul {
        position: absolute;
    }
    .character_common .custom-thumb {
        position: absolute;
        bottom: 7%;
        transform: translateX(4%);
        left: 11%;
        z-index: 12;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
        -ms-flex-align: center;
        width: 90vw;
        margin: auto;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .custom-thumb li {
        position: relative;
        width: 44px;
    }
    .custom-thumb img {
        width: 46px;
        height: 39px;
    }
    .chara-gray {
        position: absolute;
        top: 0;
        left: 0;
    }
    .custom-thumb .active img.chara-gray {
        opacity: 1 !important;
    }
    .contents {
        position: absolute;
        width: 1061px;
        height: 649px;
        right: 0;
        left: 0;
        margin: auto;
    }
    .onAnime {
        width: 980px !important;
        height: 857px;
    }
    .slideIn .onAnime div {
        opacity: 1;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    .charaN {
        position: absolute;
        width: 50vw !important;
        right: 0;
        z-index: 12;
    }
    .charaName {
        position: absolute;
        width: 50vw;
        top: 10vw;
        left: 16vw;
        z-index: 12;
    }
    .charaTxt {
        position: absolute;
        z-index: 60;
        width: 50vw;
        top: 23vw;
        left: 21vw;
    }
    /* chara end*/
    /* event start*/
    .harepai .event {
        position: relative;
        width: 100%;
        margin: 0 auto;
    }
    .feature_contents .bg_event01 {
        position: relative;
        z-index: 10;
        width: 100%;
        height: 90vw;
        background: url(../img/event/enent_bg01.jpg) no-repeat top center/cover;
        background-attachment: fixed;
        background-position: bottom center, center;
        background-size: cover;
        background-repeat: repeat-y, no-repeat;
    }
    .feature_contents .event_contents01 {
        position: absolute;
        top: 8%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 10;
    }
    .feature_contents .event_txt01 {
        position: absolute;
        bottom: 4%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 12;
    }
    .feature_contents .bg_event02 {
        position: relative;
        z-index: 10;
        width: 100%;
        height: 90vw;
        background: url(../img/event/enent_bg02.jpg) no-repeat top center/cover;
        background-attachment: fixed;
        background-position: bottom center, center;
        background-size: cover;
        background-repeat: repeat-y, no-repeat;
    }
    .feature_contents .event_contents02 {
        position: absolute;
        top: 12%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 10;
    }
    .feature_contents .event_txt02 {
        position: absolute;
        bottom: 2%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 12;
    }
    .feature_contents .bg_event03 {
        position: relative;
        z-index: 10;
        width: 100%;
        height: 90vw;
        background: url(../img/event/enent_bg03.jpg) no-repeat top center/cover;
        background-attachment: fixed;
        background-position: bottom center, center;
        background-size: cover;
        background-repeat: repeat-y, no-repeat;
    }
    .feature_contents .event_contents03 {
        position: absolute;
        top: 16%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 10;
    }
    .feature_contents .event_txt03 {
        position: absolute;
        bottom: 4%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 12;
    }
    .feature_contents .bg_event04 {
        position: relative;
        z-index: 10;
        width: 100%;
        height: 90vw;
        background: url(../img/event/enent_bg04.jpg) no-repeat top center/cover;
        background-attachment: fixed;
        background-position: bottom center, center;
        background-size: cover;
        background-repeat: repeat-y, no-repeat;
    }
    .feature_contents .event_contents04 {
        position: absolute;
        top: 14%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 10;
    }
    .feature_contents .event_txt04 {
        position: absolute;
        bottom: 4%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 12;
    }
    .feature_contents .bg_event05 {
        position: relative;
        z-index: 10;
        width: 100%;
        height: 90vw;
        background: url(../img/event/enent_bg05.jpg) no-repeat top center/cover;
        background-attachment: fixed;
        background-position: bottom center, center;
        background-size: cover;
        background-repeat: repeat-y, no-repeat;
    }
    .feature_contents .event_contents05 {
        position: absolute;
        top: 14%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 10;
    }
    .feature_contents .event_txt05 {
        position: absolute;
        bottom: 4%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 12;
    }
    /* event end*/
    /* serial start*/
    .harepai .serial_space {
        position: relative;
        text-align: center;
        right: 0;
        left: 0;
        margin: auto;
        width: 100%;
    }
    .harepai .serial_text {
        position: absolute;
        top: 14%;
        right: 0;
        left: 0;
        margin: auto;
        width: 50%;
    }
    .harepai .serial_code {
        position: absolute;
        right: 0;
        left: 0;
        margin: auto;
        width: 80%;
        font-size: 20px;
        top: 40%;
        color: #532f1c;
    }
    .harepai .serial_desc {
        position: absolute;
        right: 0;
        left: 0;
        margin: auto;
        width: 100%;
        font-size: 10px;
        top: 52%;
        color: #b09267;
    }
    /* コピーボタン */
    .copy_btn {
        position: absolute;
        width: 65%!important;
        bottom: 15%;
        right: 0;
        left: 0;
        padding: 12px 0;
        margin-left: auto!important;
        margin-right: auto!important;
        color: #ffffff;
        font-weight: bold;
        background: #ad7456;
        border: solid 2px #532f1c;
        border-radius: 3px;
        transition: .4s;
        text-align: center;
    }
    .copy_btn:hover {
        background: #ffffff;
        color: #000000;
    }
    .copy_btn:hover {
        cursor: pointer;
    }
    /* serial end*/
    /* avgames start*/
    .harepai .banner_space {
        position: relative;
        text-align: center;
        right: 0;
        left: 0;
        margin: auto;
        width: 100%;
    }
    .harepai .banner {
        position: absolute;
        text-align: center;
        right: 0;
        left: 0;
        margin: auto;
        width: 60%;
    }
    /* avgames end*/
    .harepai .info {
        z-index: 12;
        height: 83vw;
        margin: 0 auto;
        background: url(../img/twitter/twitter_frame.png) 0 0 no-repeat;
        background-size: contain;
        box-sizing: border-box;
    }
    .harepai .twitter-frame .info-twitter {
        right: 0;
        left: 0;
        margin: auto;
        width: 72vw;
        height: 80vw;
        padding: 34px 10px 10px 10px;
    }
    .sec_color {
        position: relative;
        width: 100%;
        height: 6px;
        z-index: 10;
        background-color: #2e2e2e;
        text-align: center;
    }
    .pos_center {
        width: 100%;
        text-align: center;
        opacity: 0;
        padding-top: 6px;
        margin-top: 0;
        margin-bottom: 0;
        -webkit-transition: all 1.5s;
        transition: all 1.5s;
        -webkit-transform: translate3d(0, 50px, 0);
        -ms-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0);
    }
    .pos_center.slideIn {
        opacity: 1 !important;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    /* js harepai start*/
    .bx-wrapper {
        position: absolute;
        width: 100vw;
        right: 0;
        left: 0;
        margin: auto;
    }
    .bx-wrapper .bx-controls-direction a {
        top: 60% !important;
        width: 14px !important;
        height: 32px !important;
    }
    .bx-viewport {
        overflow: visible !important;
        width: 100vw !important;
        height: 61vw !important;
    }
    .bx-wrapper .bx-prev {
        right: 36% !important;
        left: auto !important;
        background: url(../img/character/chara_arrow_L.png) no-repeat !important;
        background-size: 14px 32px !important;
    }
    .bx-wrapper .bx-next {
        right: 6% !important;
        left: auto !important;
        background: url(../img/character/chara_arrow_R.png) no-repeat !important;
        background-size: 14px 32px !important;
    }
    /* js harepai end*/
    .footer {
        position: relative;
        width: 100%;
        height: 14vw;
        background-color: rgb(42 82 156);
    }
    .logo {
        position: absolute;
        width: 18vw;
        top: 7%;
        right: 50%;
        transform: translateX(-90%);
    }
    .company {
        position: absolute;
        width: 24vw;
        top: 35%;
        left: 50%;
    }
}


/*画面幅が600px以上で1024px以下の場合（タブレット）に適用するCSSを記入*/

@media screen and (min-width: 600px) and (max-width: 1024px) {
    img {
        width: 100%;
        height: auto;
    }
    .pc {
        display: none !important;
    }
    .sp {
        display: block !important;
    }
    .phone {
        display: none !important;
    }
    .tablet {
        display: block !important;
    }
    .page_feature {
        position: relative;
        overflow: hidden;
        width: 100%;
        /*
        margin: 0 -12px;
        padding: 0 12px;
        */
    }
    body {
        min-width: initial;
        display: block;
        margin: 0;
    }
    ul {
        list-style-type: none;
        padding-left: 0;
    }
    li {
        width: 200px;
    }
    .float {
        width: 1200px;
        margin: auto;
        overflow: hidden;
    }
    .float li {
        float: left;
    }
    .bg_image {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: -99;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        background: url(../img/bg.jpg);
        background-attachment: fixed;
        background-position: bottom center, center;
        background-size: cover;
        background-repeat: repeat-y, no-repeat;
    }
    .page_feature .bg_header {
        position: relative;
        z-index: 10;
        width: 100vw;
        height: 146vw;
        background: url(../img/sp/fv/fv_bg.jpg) no-repeat top center/cover;
        text-align: center;
    }
    /* FV start*/
    .harepai .fv_txt {
        position: absolute;
        top: 0;
        width: 100vw;
        margin: auto;
        right: 0;
        left: 0;
        z-index: 100;
    }
    .harepai .fv_logo {
        position: absolute;
        top: 10%;
        width: 65vw;
        margin: auto;
        right: 0;
        left: 0;
        z-index: 100;
    }
    .harepai .fv_chara01 {
        position: absolute;
        width: 92vw;
        top: 20%;
        margin: auto;
        right: 0;
        left: 0;
    }
    .harepai .fv_chara02 {
        position: absolute;
        width: 65vw;
        top: 61%;
        margin: auto;
        right: 0;
        left: 0;
    }
    /*
    .harepai .fv_serial {
        position: absolute;
        width: 436px;
        height: 125px;
        bottom: 14%;
        left: 50%;
        transform: translateX(-120%);
    }
    */
    .harepai .fv_btn {
        position: absolute;
        width: 70vw;
        right: 0;
        left: 0;
        margin: auto;
        bottom: 0%;
    }
    /* FV end*/
    .sec_bar {
        position: relative;
        width: 100%;
        height: 8px;
        z-index: 10;
        background: url(../img/section_bar.png) no-repeat top center/cover;
        text-align: center;
    }
    /* movie start*/
    .harepai .promotionMovie {
        width: 90vw;
        margin: 0 auto;
        text-align: center;
        opacity: 0;
        -webkit-transition: all 1.5s;
        transition: all 1.5s;
        -webkit-transform: translate3d(0, 50px, 0);
        -ms-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0);
    }
    .harepai .promotionMovie.slideIn {
        opacity: 1 !important;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    .feature_contents .bg_promo {
        position: relative;
        z-index: 10;
        width: 100%;
        background: url(../img/movie/movie_bg.jpg) no-repeat top center/cover;
        background-attachment: fixed;
        background-position: bottom center, center;
        background-size: cover;
        background-repeat: repeat-y, no-repeat;
    }
    /*
    .video-btn {
        content: "";
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:40px;
        cursor: pointer;
    }
    */
    /* movie end*/
    /* intro start*/
    .feature_contents .bg_intro {
        position: relative;
        z-index: 10;
        overflow: hidden;
        width: 100%;
        height: 128vw;
        background: url(../img/sp/intro/intro_bg.jpg) no-repeat top center/cover;
        background-attachment: fixed;
        background-position: bottom center, center;
        background-size: cover;
        background-repeat: repeat-y, no-repeat;
    }
    .harepai .intro {
        width: 100%;
        height: 100%;
        position: relative;
        top: 0;
        z-index: 12;
        text-align: center;
        margin: 0 auto;
        opacity: 0;
        -webkit-transition: all 1.5s;
        transition: all 1.5s;
        -webkit-transform: translate3d(0, 50px, 0);
        -ms-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0);
    }
    .harepai .introCard {
        position: absolute;
        perspective: 500px;
    }
    .intro_ef {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        width: 100%;
    }
    .harepai .intro.slideIn {
        opacity: 1 !important;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    .harepai .intro_text {
        width: 70vw;
        position: absolute;
        right: 0;
        left: 0;
        margin: auto;
        top: 41%;
        z-index: 12;
        opacity: 0;
        text-align: center;
    }
    .harepai .intro_text.slideIn {
        opacity: 1 !important;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    /* intro end*/
    /* chara start*/
    .chara_bg {
        position: relative;
        z-index: 10;
        width: 100vw;
        height: 61vw;
        background: url(../img/character/chara_frame.png) no-repeat;
        background-size: contain;
        background-position: top, center;
    }
    .harepai .character_common {
        position: relative;
        margin: 0 auto;
        text-align: center;
        opacity: 0;
        -webkit-transition: all 1.5s;
        transition: all 1.5s;
        -webkit-transform: translate3d(0, 50px, 0);
        -ms-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0);
    }
    .harepai .character_common.slideIn {
        opacity: 1 !important;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    .character_common ul {
        position: absolute;
    }
    .character_common .custom-thumb {
        position: absolute;
        bottom: 7%;
        transform: translateX(4%);
        left: 11%;
        z-index: 12;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
        -ms-flex-align: center;
        width: 90vw;
        margin: auto;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .custom-thumb li {
        position: relative;
        width: 124px;
    }
    .custom-thumb img {
        width: 124px;
        height: 105px;
    }
    .chara-gray {
        position: absolute;
        top: 0;
        left: 0;
    }
    .custom-thumb .active img.chara-gray {
        opacity: 1 !important;
    }
    .contents {
        position: absolute;
        width: 1061px;
        height: 649px;
        right: 0;
        left: 0;
        margin: auto;
    }
    .onAnime {
        width: 980px !important;
        height: 857px;
    }
    .slideIn .onAnime div {
        opacity: 1;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    .charaN {
        position: absolute;
        width: 50vw !important;
        right: 0;
        z-index: 12;
    }
    .charaName {
        position: absolute;
        width: 50vw;
        top: 10vw;
        left: 16vw;
        z-index: 12;
    }
    .charaTxt {
        position: absolute;
        z-index: 60;
        width: 50vw;
        top: 23vw;
        left: 21vw;
    }
    /* chara end*/
    /* event start*/
    .harepai .event {
        position: relative;
        width: 100%;
        margin: 0 auto;
    }
    .feature_contents .bg_event01 {
        position: relative;
        z-index: 10;
        width: 100%;
        height: 90vw;
        background: url(../img/event/enent_bg01.jpg) no-repeat top center/cover;
        background-attachment: fixed;
        background-position: bottom center, center;
        background-size: cover;
        background-repeat: repeat-y, no-repeat;
    }
    .feature_contents .event_contents01 {
        position: absolute;
        top: 8%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 10;
    }
    .feature_contents .event_txt01 {
        position: absolute;
        bottom: 4%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 12;
    }
    .feature_contents .bg_event02 {
        position: relative;
        z-index: 10;
        width: 100%;
        height: 90vw;
        background: url(../img/event/enent_bg02.jpg) no-repeat top center/cover;
        background-attachment: fixed;
        background-position: bottom center, center;
        background-size: cover;
        background-repeat: repeat-y, no-repeat;
    }
    .feature_contents .event_contents02 {
        position: absolute;
        top: 12%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 10;
    }
    .feature_contents .event_txt02 {
        position: absolute;
        bottom: 2%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 12;
    }
    .feature_contents .bg_event03 {
        position: relative;
        z-index: 10;
        width: 100%;
        height: 90vw;
        background: url(../img/event/enent_bg03.jpg) no-repeat top center/cover;
        background-attachment: fixed;
        background-position: bottom center, center;
        background-size: cover;
        background-repeat: repeat-y, no-repeat;
    }
    .feature_contents .event_contents03 {
        position: absolute;
        top: 16%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 10;
    }
    .feature_contents .event_txt03 {
        position: absolute;
        bottom: 4%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 12;
    }
    .feature_contents .bg_event04 {
        position: relative;
        z-index: 10;
        width: 100%;
        height: 90vw;
        background: url(../img/event/enent_bg04.jpg) no-repeat top center/cover;
        background-attachment: fixed;
        background-position: bottom center, center;
        background-size: cover;
        background-repeat: repeat-y, no-repeat;
    }
    .feature_contents .event_contents04 {
        position: absolute;
        top: 14%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 10;
    }
    .feature_contents .event_txt04 {
        position: absolute;
        bottom: 4%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 12;
    }
    .feature_contents .bg_event05 {
        position: relative;
        z-index: 10;
        width: 100%;
        height: 90vw;
        background: url(../img/event/enent_bg05.jpg) no-repeat top center/cover;
        background-attachment: fixed;
        background-position: bottom center, center;
        background-size: cover;
        background-repeat: repeat-y, no-repeat;
    }
    .feature_contents .event_contents05 {
        position: absolute;
        top: 14%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 10;
    }
    .feature_contents .event_txt05 {
        position: absolute;
        bottom: 4%;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 12;
    }
    /* event end*/
    /* serial start*/
    .harepai .serial_space {
        position: relative;
        text-align: center;
        right: 0;
        left: 0;
        margin: auto;
        width: 100%;
    }
    .harepai .serial_text {
        position: absolute;
        top: 14%;
        right: 0;
        left: 0;
        margin: auto;
        width: 50%;
    }
    .harepai .serial_code {
        position: absolute;
        right: 0;
        left: 0;
        margin: auto;
        width: 80%;
        font-size: 40px;
        top: 40%;
        color: #532f1c;
    }
    .harepai .serial_desc {
        position: absolute;
        right: 0;
        left: 0;
        margin: auto;
        width: 100%;
        font-size: 20px;
        top: 56%;
        color: #b09267;
    }
    /* コピーボタン */
    .copy_btn {
        position: absolute;
        width: 65%!important;
        bottom: 15%;
        right: 0;
        left: 0;
        padding: 12px 0;
        margin-left: auto!important;
        margin-right: auto!important;
        color: #ffffff;
        font-weight: bold;
        background: #ad7456;
        border: solid 2px #532f1c;
        border-radius: 3px;
        transition: .4s;
        text-align: center;
    }
    .copy_btn:hover {
        background: #ffffff;
        color: #000000;
    }
    .copy_btn:hover {
        cursor: pointer;
    }
    /* serial end*/
    /* avgames start*/
    .harepai .banner_space {
        position: relative;
        text-align: center;
        right: 0;
        left: 0;
        margin: auto;
        width: 100%;
    }
    .harepai .banner {
        position: absolute;
        text-align: center;
        right: 0;
        left: 0;
        margin: auto;
        width: 60%;
    }
    /* avgames end*/
    .harepai .info {
        z-index: 12;
        height: 83vw;
        margin: 0 auto;
        background: url(../img/twitter/twitter_frame.png) 0 0 no-repeat;
        background-size: contain;
        box-sizing: border-box;
    }
    .harepai .twitter-frame .info-twitter {
        right: 0;
        left: 0;
        margin: auto;
        width: 66vw;
        height: 80vw;
        padding: 84px 10px 10px 10px;
    }
    .sec_color {
        position: relative;
        width: 100%;
        height: 6px;
        z-index: 10;
        background-color: #2e2e2e;
        text-align: center;
    }
    .pos_center {
        width: 100%;
        text-align: center;
        opacity: 0;
        padding-top: 6px;
        margin-top: 0;
        margin-bottom: 0;
        -webkit-transition: all 1.5s;
        transition: all 1.5s;
        -webkit-transform: translate3d(0, 50px, 0);
        -ms-transform: translate3d(0, 50px, 0);
        transform: translate3d(0, 50px, 0);
    }
    .pos_center.slideIn {
        opacity: 1 !important;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    /* js harepai start*/
    .bx-wrapper {
        position: absolute;
        width: 100vw;
        right: 0;
        left: 0;
        margin: auto;
    }
    .bx-wrapper .bx-controls-direction a {
        top: 60% !important;
        width: 28px !important;
        height: 64px !important;
    }
    .bx-viewport {
        overflow: visible !important;
        width: 100vw !important;
        height: 61vw !important;
    }
    .bx-wrapper .bx-prev {
        right: 36% !important;
        left: auto !important;
        background: url(../img/character/chara_arrow_L.png) no-repeat !important;
        background-size: 28px 64px !important;
    }
    .bx-wrapper .bx-next {
        right: 6% !important;
        left: auto !important;
        background: url(../img/character/chara_arrow_R.png) no-repeat !important;
        background-size: 28px 64px !important;
    }
    /* js harepai end*/
    .footer {
        position: relative;
        width: 100%;
        height: 14vw;
        background-color: rgb(42 82 156);
    }
    .logo {
        position: absolute;
        width: 18vw;
        top: 7%;
        right: 50%;
        transform: translateX(-90%);
    }
    .company {
        position: absolute;
        width: 24vw;
        top: 35%;
        left: 50%;
    }
}