@charset "UTF-8";

body {
    min-width: 1100px;
}

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

/* smartPhone END */

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

#contents_block #mainBox {
    width: 100%;
    min-width: 1100px;
    height: 700px;
    overflow: hidden;
    background-color: #fff;
    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: auto;
        overflow: hidden;
        background-color: #d20012;
        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;
    }

    #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 #counter #canvas5,
    #contents_block #counter #animation_container5,
    #contents_block #counter dom_overlay_container5 {
        display: none
    }

}

#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 {
    padding: 30px 0px;
    min-width: 1100px;
    overflow: hidden;
    position: relative;
    background-color: #d20012;
    background-image: url('../top_img/24_bg_spring.png');
    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: 0px 0px 0px 0px;
        min-width: 320px;
        overflow: hidden;
        position: relative;
        background-image: url('../top_img/24_bg_spring_sp.png');
        background-size: 100%;
    }

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


}

/* 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: 90%;
        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 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: #CE0000;
    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;
}

/* smartPhone */
@media screen and (max-width: 640px) {
    #contents_block .whatsnew ul {
        width: 100%;
    }

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

    #contents_block .whatsnew .col3 li:nth-child(2) {
        width: 23%;
        font-size: 16px;
    }

    #contents_block .whatsnew .col3 li:nth-child(3) {
        width: 70%;
        font-size: 16px;
    }

    #contents_block .whatsnew .col2 li:nth-child(1) {
        width: 20%;
        font-size: 16px;
    }

    #contents_block .whatsnew .col2 li:nth-child(2) {
        width: 80%;
        font-size: 16px;
    }

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

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

/* smartPhone END */


#contents_block .regist {
    font-size: 0.8em;
    width: 980px;
    margin: 20px auto 20px auto;
    text-align: right;
    color: #666666;
}

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

    #contents_block .regist {
        width: 90%;
        margin: 2em auto 2em auto;
        text-align: center;
        color: #666666;
    }


}



#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;
    }


}

/*******************
 * welcome
 *******************/

#contents_block .welcome_pkber {
    width: 100%;
    height: 170px;
    background-color: #d20012;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-top: -30px;
    margin-bottom: -30px;
}

#contents_block .welcome_pkber img {
    width: auto;
    height: 170px;
}

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

    #contents_block .welcome_pkber {
        width: 100%;
        height: 28vw;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    #contents_block .welcome_pkber img {
        width: auto;
        height: 26vw;
    }

}