@charset "utf-8";

/* clearfix */
.clearfix { zoom: 1; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }

/*================================================================================
    common style
================================================================================*/
body {
    font-size: 22px;
    line-height: 1.7;
}
a { -webkit-tap-highlight-color: rgba(0,0,0,0); }

header{
    width:100%; height:230px; overflow:hidden;
    position:relative;
    background:url(../images/common/bg_header_01.png) repeat-x #fff;
}
    header div{
        width:904px; height:230px;
        margin:auto; position:absolute; top:0; left: 50%;
        -webkit-transform: translateX(-50%);  transform: translateX(-50%);
    }
    header h1{
        position:absolute; left:0px; top:24px;
    }
    #head_qbist{
        position:absolute; left:0px; top:0px;
    }
    #head_chara{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;display: -moz-flex;display: -ms-flex;
        width:560px; height:72px;
        position:absolute; bottom:0px; right:0px;
        -webkit-box-orient:horizontal;
        -webkit-box-direction:normal;
            -ms-flex-direction:row;
                flex-direction:row;
        -ms-flex-wrap:wrap;
            flex-wrap:wrap; -webkit-flex-wrap:wrap;
        -webkit-box-pack:justify;
            -ms-flex-pack:justify;
                justify-content:space-between; -webkit-justify-content:space-between;
        -ms-flex-line-pack:justify;
            align-content:space-between; -webkit-align-content:space-between;
    }
        #head_chara li{ display:block; }
        #head_chara li:last-child{ -webkit-box-flex:1.5; -ms-flex-positive:1.5; flex-grow:1.5;
            text-align:right;
        }

#wrapper{
    min-height:3454px; width:100%;
    padding:48px 0px;
    background-color:#000;
    background-image:url(../images/common/bg_body_02.png), url(../images/common/bg_body_01.png);
    background-repeat:repeat, repeat-x;
    background-position:lleft 10px, left 10px;
}

#gnavi{
    width:904px;
    -webkit-box-sizing:border-box;
            box-sizing:border-box;
    margin:auto;
}

.gnavi_wrap {
    width: 904px;
    margin: 0 auto;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    background:url(../images/common/bg_gnavi_center.png) repeat;
}

    #gnavi ul{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;display: -moz-flex;display: -ms-flex;
        width:824px; height: 620px;
        margin-left: 40px;
        -webkit-box-orient:horizontal;
        -webkit-box-direction:normal;
            -ms-flex-direction:row;
                flex-direction:row;
        -ms-flex-wrap:wrap;
            flex-wrap:wrap; -webkit-flex-wrap:wrap;
        -webkit-box-pack:justify;
            -ms-flex-pack:justify;
                justify-content:space-between; -webkit-justify-content:space-between;
        -ms-flex-line-pack:justify;
            align-content:space-between; -webkit-align-content:space-between;
    }
        #gnavi ul li a{
            width:400px; height:104px;
            display:block;
            background:url(../images/common/bg_gnavi_normal.gif) no-repeat;
        }
        #gnavi ul li a:hover{
            background-image:url(../images/common/bg_gnavi_over.gif), url(../images/common/bg_gnavi_over.png);
        }
        #gnavi ul li:nth-child(1) a:hover,
        #gnavi ul li:nth-child(11) a:hover
            { background-color:#be3535; }
        #gnavi ul li:nth-child(2) a:hover,
        #gnavi ul li:nth-child(12) a:hover
            { background-color:#8e7200; }
        #gnavi ul li:nth-child(3) a:hover{ background-color:#028366; }
        #gnavi ul li:nth-child(4) a:hover{ background-color:#2f3892; }
        #gnavi ul li:nth-child(5) a:hover{ background-color:#db7100; }
        #gnavi ul li:nth-child(6) a:hover{ background-color:#024fae; }
        #gnavi ul li:nth-child(7) a:hover{ background-color:#bc458e; }
        #gnavi ul li:nth-child(8) a:hover{ background-color:#178a35; }
        #gnavi ul li:nth-child(9) a:hover{ background-color:#128abc; }
        #gnavi ul li:nth-child(10) a:hover{ background-color:#7426a6; }
        .gnavi_chara, .gnavi_txt{
            float:left;
            position: relative; top: 50%;
            -webkit-transform: translateY(-50%);  transform: translateY(-50%);
        }
        .gnavi_chara{
            margin:auto 8px auto 32px;
        }
#gnavi ul li.new::before{
    content: url(../images/common/icon_new.png);
    width: 44px; height: 25px;
    position: absolute;
    margin: 20px 0 0 340px;
}

#comic{
    width:904px;
    margin:32px auto; padding-bottom:32px; -webkit-box-sizing:border-box; box-sizing:border-box;
    text-align:center;
    background-image:url(../images/common/bg_comic_top.png), url(../images/common/bg_comic_bottom.png), url(../images/common/bg_comic_center.png);
    background-repeat:no-repeat, no-repeat,repeat-y;
    background-position:top, bottom, center;
}
    #comic h2{
        height:90px;
        text-align:center;
    }
        #comic h2 img{
            position: relative; top: 50%;
            -webkit-transform: translateY(-50%);  transform: translateY(-50%);
        }
    #comicLoad{
        width:824px;
        margin:24px auto;
    }
    #comicContact{
        margin:auto;
        width:824px;
    }
        #comicContact a{
            display:block; text-align:left;
            width:824px; height:160px;
            background:url(../images/common/btn_contact.png) no-repeat;
        }
            #comicContact a img{
                position: relative; top: 50%; left:66px;
                -webkit-transform: translateY(-50%);  transform: translateY(-50%);
            }

footer{
    width:100%; height:120px;
    color:#fff; text-align:center;
}

#overLine{
    width:100%; height:40px;
    position:absolute; top:222px; left:0px; z-index:99;
    background:url(../images/common/img_line.png) repeat-x;
}

#btnToTop{
    width:104px; height:104px;
    position:fixed; right:10px; bottom:20px;
    z-index:100;
}

#moveBacknumber{
    /*display: none;*/
}
.backnumber p{
    color: #fff;
    padding-bottom: 1rem;
}
.backnumber a{
    text-decoration: underline;
    color: #ff0;
}

/* ヘッダーアニメーション */
h1{
    display:block;
    animation:drop 10s ease-out 0s 1 normal;
    -webkit-animation:drop 10s ease-out 0s 1 normal;
}

@keyframes drop {
    from { -webkit-transform: translateY(-200px); transform: translateY(-200px) }
    to { -webkit-transform: translateY(0px); transform: translateY(0px) }
}
@-webkit-keyframes drop {
    from { -webkit-transform: translateY(-200px); transform: translateY(-200px) }
    to { -webkit-transform: translateY(0px); transform: translateY(0px) }
}


#move_build{
    position:absolute; top:168px; left:0px;
    animation:move 160s linear 0s infinite normal;
    -webkit-animation:move 160s linear 0s infinite normal;
}
#move_cloud{
    position:absolute; top:34px; left:0px;
    animation:move 80s linear 0s infinite normal;
    -webkit-animation:move 80s linear 0s infinite normal;
}
#move_tree{
    position:absolute; top:144px; left:0px;
    animation:move 40s linear 0s infinite normal;
    -webkit-animation:move 40s linear 0s infinite normal;
}
@keyframes move {
    from { -webkit-transform: translate(-1800px); transform: translate(-1800px) }
    to { -webkit-transform: translate(100%); transform: translate(100%) }
}
@-webkit-keyframes move {
    from { -webkit-transform: translateX(-1800px); transform: translateX(-1800px) }
    to { -webkit-transform: translateX(1800px); transform: translateX(1800px) }
}

/* 画面幅切り分け */

@media screen and (max-width: 904px) {
    #copyright{ font-size:24px; }
}
@media screen and (min-width: 905px) {
}