@charset "UTF-8";

body {
    min-width: 1100px;
}

/* smartPhone */
@media screen and (max-width: 640px) {
    body {
        min-width: 320px;
    }
}

/* smartPhone END */

#contents_block .pageTitle {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    height: 0;
}


/*******************
 * メイン部分
 *******************/

#contents_block #mainBox {
    width: 100%;
    min-width: 1100px;
    height: 700px;
    overflow: hidden;
    background-color: #ffffff;
    text-align: center;
    position: relative;
}

#contents_block #mainBox .bg {
    width: 100%;
    max-width: 2000px;
    min-width: 1100px;
    height: 700px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}

#contents_block #mainBox .pc,
#contents_block #mainBox #canvas,
#contents_block #mainBox #animation_container,
#contents_block #mainBox #dom_overlay_container {
    display: block;
    z-index: 100;
}

#contents_block #mainBox .sp,
#contents_block #mainBox #canvas2,
#contents_block #mainBox #animation_container2,
#contents_block #mainBox #dom_overlay_container2 {
    display: none;
}


/* tb */
@media screen and (max-width: 1080px) {
    #contents_block #mainBox {
        width: 100%;
        min-width: 1080px;
        height: 497px;
        overflow: hidden;
        text-align: center;
        position: relative;
    }

    #contents_block #mainBox .bg {
        width: 100%;
        max-width: 1080;
        min-width: 1080px;
        height: 497px;
        position: relative;
        margin: 0 auto;
        overflow: hidden;
    }

    #contents_block #mainBox .pc,
    #contents_block #mainBox #canvas,
    #contents_block #mainBox #animation_container,
    #contents_block #mainBox #dom_overlay_container {
        display: block;
        z-index: 100;
        width: 1420px;
        height: 497px;
        position: absolute;
        left: 50%;
        margin-left: -710px;
    }

    #contents_block #mainBox .sp,
    #contents_block #mainBox #canvas2,
    #contents_block #mainBox #animation_container2,
    #contents_block #mainBox #dom_overlay_container2 {
        display: none;
    }

}

/* tb END */


/* smartPhone */
@media screen and (max-width: 640px) {
    #contents_block #mainBox {
        width: 100%;
        min-width: 320px;
        height: 100vw;
        overflow: hidden;
        background-color: #ffffff;
        text-align: center;
        position: relative;
    }

    #contents_block #mainBox .sp,
    #contents_block #mainBox #canvas2,
    #contents_block #mainBox #animation_container2,
    #contents_block #mainBox #dom_overlay_container2 {
        display: block;
    }

    #contents_block #mainBox .pc,
    #contents_block #mainBox #canvas,
    #contents_block #mainBox #animation_container,
    #contents_block #mainBox #dom_overlay_container {
        display: none;
    }

    #contents_block #mainBox .bg {
        width: 100%;
        max-width: 2000px;
        min-width: 320px;
        height: auto;
        position: relative;
        margin: 0 auto;
        overflow: hidden;
    }
}

/* smartPhone END */


/* smartPhone Landscape */
@media (orientation: landscape) and (max-width: 640px) {

    #contents_block #mainBox #canvas2,
    #contents_block #mainBox #animation_container2,
    #contents_block #mainBox #dom_overlay_container2 {
        width: 640px !important;
        height: 700px !important;
    }

}


#contents_block #counter {
    width: 100%;
    min-width: 1100px;
    height: 110px;
    overflow: hidden;
    text-align: center;
    position: relative;
}

#contents_block #counter .pc,
#contents_block #counter #canvas,
#contents_block #counter #animation_container,
#contents_block #counter #dom_overlay_container {
    display: block;
}

#contents_block #counter .sp,
#contents_block #counter #canvas2,
#contents_block #counter #animation_container2,
#contents_block #counter #dom_overlay_container2 {
    display: none;
}

/* smartPhone */
@media screen and (max-width: 640px) {
    #contents_block #counter {
        width: 100%;
        min-width: 230px;
        height: auto;
        overflow: hidden;
        text-align: center;
        position: relative;
        margin: 5vw auto;
    }

    #contents_block #counter .sp,
    #contents_block #counter #canvas4,
    #contents_block #counter #animation_container4,
    #contents_block #counter #dom_overlay_container4 {
        display: block;
    }

    #contents_block #counter .pc,
    #contents_block #counter #canvas3,
    #contents_block #counter #animation_container3,
    #contents_block #counter #dom_overlay_container3 {
        display: none;
    }

    #contents_block #counter .bg {
        width: 100%;
        max-width: 2000px;
        min-width: 230px;
        height: auto;
        position: relative;
        margin: 0 auto;
        overflow: hidden;
    }
}

/* smartPhone END */


/* smartPhone Landscape */
@media (orientation: landscape) and (max-width: 640px) {

    #contents_block #counter #canvas4,
    #contents_block #counter #animation_container4,
    #contents_block #counter #dom_overlay_container4 {
        width: 640px !important;
        height: 230px !important;
    }

}


/*******************
 * 紙吹雪
 *******************/


#contents_block #fubuki {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    /* ディスプレイに応じた固定幅 */
    max-width: 2000px;
    /* 必要に応じて最大幅を調整 */
    min-width: 980px;
    /* 最小幅を指定してズレを防止 */
    padding: 20px;
    box-sizing: border-box;
}


#contents_block .btnMessage {
    width: 215px;
    opacity: 0;
    position: absolute;
    top: 600px;
    right: 20px;
    z-index: 9999;
}

#contents_block .btnMessage a img {
    width: 100%;
    height: auto;
}

#contents_block .btnMessage a:hover img {
    margin-top: -5px
}

/* smartPhone */
@media screen and (max-width: 1100px) {

    #contents_block .btnMessage {
        display: none;
    }

}

/* smartPhone */
@media screen and (max-width: 640px) {

    #contents_block .btnMessage {
        display: none;
    }

}





/*******************
 * バナー
 *******************/

#contents_block #subBox h2 {
    font-weight: normal;

}

#contents_block #subBox {
    padding: 2em 0px 0px 0px;
    min-width: 1100px;
    overflow: hidden;
    position: relative;
    background-color: #ca0011;
    background-size: 2000px;
    background-position: center top;
    background-repeat: repeat-y;

}


#contents_block #subBox .smItem {
    padding: 0px 0px;
    min-width: 1100px;
    overflow: hidden;
    position: relative;
}


/* tb */
@media screen and (max-width: 1180px) {

    #contents_block #subBox .smItem {
        background-size: 1600px;
    }


}

/* tb END */

/* smartPhone */
@media screen and (max-width: 640px) {

    #contents_block #subBox {
        padding: 2em 0px 0px 0px;
        min-width: 320px;
        overflow: hidden;
        position: relative;
        background-image: none;
        background-size: 100%;
    }

    #contents_block #subBox .smItem {
        min-width: 320px;
        overflow: hidden;
        position: relative;
        background-size: cover;
        background-repeat: no-repeat;
        padding-top: 0vw;
    }


}

/* smartPhone END */



#contents_block .menuBox {
    width: 980px;
    margin: 0px auto 30px auto;
    text-align: center;
    position: relative;
    z-index: 10;
}

#contents_block .menuBox>li {
    margin-bottom: 30px;
    background-color: #fff;
}

#contents_block .menuBox>li>img {
    width: 465px;
    height: auto;
}

#contents_block .menuBox a {
    font-size: 0px;
    width: 465px;
    border: solid #fff 1px;
    box-sizing: border-box;
}

#contents_block .menuBox a img {
    width: 463px;
    height: auto;
}


/* smartPhone */
@media screen and (max-width: 640px) {

    #contents_block .menuBox {
        width: 100%;
        margin: 0vw auto 1em auto;
    }

    #contents_block .menuBox>li {
        width: 80%;
        margin: 0 auto 30px auto;
    }

    #contents_block .menuBox>li>img {
        width: 100%;
        height: auto;
    }

    #contents_block .menuBox a {
        font-size: 0px;
        width: 100%;
    }

    #contents_block .menuBox a img {
        width: 100%;
        height: auto;
    }

}

/* smartPhone END */



#contents_block .whatsnew,
#contents_block .whatsnew ul {
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

#contents_block .whatsnew span {
    display: inline;
}

#contents_block .whatsnew ul {
    width: 465px;
    display: flex;
}

#contents_block .whatsnew ul li {
    padding: 10px 0px;
    line-height: 140%;
    background-color: #ffffff
}

#contents_block .whatsnew .col3 li:nth-child(1) {
    width: 45px;
    background: #ff0000;
    color: #FFF;
    font-size: 12px;
    text-align: center;
}

#contents_block .whatsnew .col3 li:nth-child(2) {
    width: 100px;
    background: #999;
    color: #FFF;
    font-size: 12px;
    text-align: center;
}

#contents_block .whatsnew .col3 li:nth-child(3) {
    width: 315px;
    background: #FFF;
    color: #333;
    font-size: 12px;
    text-align: left;
    padding-left: 15px;
}

#contents_block .whatsnew .col2 li:nth-child(1) {
    width: 135px;
    background: #999;
    color: #FFF;
    font-size: 12px;
}

#contents_block .whatsnew .col2 li:nth-child(2) {
    width: 315px;
    background: #FFF;
    color: #333;
    font-size: 12px;
    text-align: left;
    padding-left: 15px;
}

#contents_block .whatsnew .col2r li:nth-child(1) {
    width: 135px;
    background: #ff0000;
    color: #FFF;
    font-size: 12px;
}

#contents_block .whatsnew .col2r li:nth-child(2) {
    width: 315px;
    background: #FFF;
    color: #333;
    font-size: 12px;
    text-align: left;
    padding-left: 15px;
}

#contents_block .whatsnew .col1 li:nth-child(1) {
    width: 45px;
    background: #ff0000;
    color: #FFF;
    font-size: 12px;
}

#contents_block .whatsnew .col1 li:nth-child(2) {
    width: 405px;
    background: #FFF;
    color: #333;
    font-size: 12px;
    text-align: left;
    padding-left: 15px;
}

#contents_block .whatsnew .col0 li:nth-child(1) {
    width: 465px;
    background: #FFF;
    color: #333;
    font-size: 12px;
    text-align: left;
    padding-left: 15px;
}


/* smartPhone */
@media screen and (max-width: 640px) {
    #contents_block .whatsnew span {
        display: block;
    }

    #contents_block .whatsnew ul {
        width: 100%;
    }

    #contents_block .whatsnew .col3 li:nth-child(1) {
        width: 10%;
        font-size: 0.5em;
    }

    #contents_block .whatsnew .col3 li:nth-child(2) {
        width: 30%;
        font-size: 0.5em;
    }

    #contents_block .whatsnew .col3 li:nth-child(3) {
        width: 70%;
        font-size: 0.5em;
        padding-left: 1em;
        padding-right: 1em;
    }

    #contents_block .whatsnew .col2 li:nth-child(1) {
        width: 30%;
        font-size: 0.5em;
    }

    #contents_block .whatsnew .col2 li:nth-child(2) {
        width: 70%;
        font-size: 0.5em;
        padding-left: 1em;
        padding-right: 1em;
    }

    #contents_block .whatsnew .col2r li:nth-child(1) {
        width: 35%;
        font-size: 0.5em;
    }

    #contents_block .whatsnew .col2r li:nth-child(2) {
        width: 65%;
        text-align: left;
        padding-left: 1em;
        padding-right: 1em;
        font-size: 0.5em;
    }

    #contents_block .whatsnew .col1 li:nth-child(1) {
        width: 10%;
        font-size: 0.5em;
    }

    #contents_block .whatsnew .col1 li:nth-child(2) {
        width: 90%;
        text-align: left;
        padding-left: 1em;
        padding-right: 1em;
        font-size: 0.5em;
    }

    #contents_block .whatsnew .col0 li:nth-child(1) {
        width: 100%;
        font-size: 0.5em;
    }
}

/* smartPhone END */



#contents_block .flagman {
    width: 700px;
    margin: 1.5em auto -1.5em;
}

#contents_block .flagman img {
    width: 100%;
    height: auto;
}

#contents_block .flagman .sp {
    display: none;
}

#contents_block .flagman .pc {
    display: block;
}

/* smartPhone */
@media screen and (max-width: 640px) {

    #contents_block .flagman {
        width: 80%;
        margin: 1.5em auto -1.0em;
    }

    #contents_block .flagman .sp {
        display: block;
    }

    #contents_block .flagman .pc {
        display: none;
    }


}

/*******************
 * entryber
 *******************/

#contents_block .entryber {
    display: block;
    width: 100%;
    height: 80px;
    background-image: url('../top_img/24_entryber_top.png');
    background-size: 900px;
    background-repeat: repeat-x;
}


/* smartPhone */
@media screen and (max-width: 640px) {

    #contents_block .entryber {
        display: block;
        width: 100%;
        height: 9vw;
        margin-top: 3vw;
        margin-bottom: 0px;
        background-size: 138vw;
    }

}