@charset "utf-8";

/*------------------------------------------------
index ユーザー向け管理画面TOPページ
------------------------------------------------- */
.choiceBox li a{
    font-size: 34px;
}
.choiceBox li.fctnldts a {
    padding: 21px 0 22px;
}

.ecBox a{
    font-size: 34px;
}
.ecBox a:before{
    margin-right: 15px;
    width: 40px;
    height: 38px;
}

/*------------------------------------------------
playCommon
------------------------------------------------- */
#CountDownBox.cardCountDown{
    padding-top: 25vh;
}

@media screen and (max-width: 768px) {

    /*------------------------------------------------
    スマホmenu用
    ------------------------------------------------- */
    header.header {
        z-index: 10000;
    }
    .glnav{
        display: none;
    }

    ul#burger{
        width:45px;
        height:45px;
        position:fixed;
        top:15px;
        right:2.5%;
        cursor:pointer;
        z-index: 10001;
        display: block;
        background: #fff;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
    }

    ul#burger li{
        width:25px;
        height:3px;
        position:absolute;
        left:0; right:0;
        top:50%;
        margin:-1px auto 0;
        background: #275bbf;
        transition:.2s;
    }

    ul#burger:before,
    ul#burger:after{
        content:'';
        display: block;
        width:25px;
        height:3px;
        position:absolute;
        left:0; right:0;
        margin:-1px auto 0;
        background: #275bbf;
        transition:.2s;
        border-radius: 50px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
    }

    ul#burger:before{
        top:30%;
    }

    ul#burger:after{
        top:70%;
    }
    ul#burger span{
        position:absolute;
        left:0; right:0;
        top:2px;
        display:block;
        text-align: center;
        font-size:11px;
        color:#002D77;
        font-weight:bold;
    }
    ul#burger.active{
        border: 1px solid rgba(255, 68, 0, 0);
        box-sizing: border-box;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
    }
    ul#burger.active li{
        opacity:0;
    }
    ul#burger.active:before,
    ul#burger.active:after{
    }

    ul#burger.active:before{
        transform: rotate(405deg);
        -moz-transform: rotate(405deg);
        -webkit-transform: rotate(405deg);
        -o-transform: rotate(405deg);
        -ms-transform: rotate(405deg);
        transform-origin: center;
        -moz-transform-origin: center;
        -webkit-transform-origin: center;
        -o-transform-origin: center;
        top: 53%;
    }
    ul#burger.active:after{
        transform: rotate(-405deg);
        -moz-transform: rotate(-405deg);
        -webkit-transform: rotate(-405deg);
        -o-transform: rotate(-405deg);
        -ms-transform: rotate(-405deg);
        transform-origin: center;
        -moz-transform-origin: center;
        -webkit-transform-origin: center;
        -o-transform-origin: center;
        top: 53%;
    }
    ul#burger.active span{
        color:#ff4400;
    }

    #menuOverlay{
        display: none;
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        z-index: 9999;
    }
    nav#spMenu{
        position: fixed;
        top: 0;
        right: -20%;
        background: rgba(255, 255, 255, 0.95);
        width: 80%;
        height: 100%;
        box-sizing: border-box;
        z-index: 10000;
        padding: 30px 20px;
        overflow: auto;
    }

    ul.mainMenu {
        margin:0 auto 0;
    }
    ul.mainMenu li{
        width: 100%;
        border-bottom: 1px solid #e0e0e0;
        margin: auto;
    }
    ul.mainMenu li a{
        display: block;
        font-size:14px;
        line-height: 55px;
        text-decoration: none;
        font-weight: bold;
        color: #000;
    }
    ul.infoMenu{
        position: absolute;
        bottom:20px;
        right:20px ;
    }
    ul.infoMenu li{
        float:left;
        margin:0 0 0 20px;
    }
    ul.infoMenu li a{
        font-size:12px;
        font-weight:bold;
        color:#000;
    }

    /*------------------------------------------------
    common コンポーネント的な内容をここに記述
    ------------------------------------------------- */
    .commonDl.edit dt{
        float: none;
        font-size: initial;
    }
    .commonDl.edit dd {
        padding: 0 0 0 0px;
        margin: 0 0 20px 0;
    }


    /*------------------------------------------------
    main
    ------------------------------------------------- */
    main {
        padding: 20px 0 0 0;
    }

    /*------------------------------------------------
    index ユーザー向け管理画面TOPページ
    ------------------------------------------------- */
    .trainingBox{
        width:100%;
        margin:auto;
    }
    .trainingItem{
        width:100%;
    }
    .choiceBox li{
        width: 49%;
        margin-right:2%;
        text-align: center;
    }
    .choiceBox li:nth-child(2n){
        margin-right:0;
    }

    .spacer_thanks{
        width:170px;
    }

    /*------------------------------------------------
    ranking ランキング
    ------------------------------------------------- */

    .rankingSection{
        display: block;
    }
    .rankingSection .commonSection{
        width:100%;
        max-width: inherit;
    }
    .rankingSide{
        width:88%;
        min-width:150px;
        margin:auto;
    }

    #rankingCatWrap{
        width: 90%;
        background: #fff;
        position: fixed;
        top: 20px;
        padding: 20px 0;
        box-sizing: border-box;
        display: none;
        z-index: 10002;
        border-radius: 15px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        max-height: calc( 100vh - 40px );
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
    .rankingSide ul {
        display: flex;
        flex-wrap:wrap;
        align-items: flex-start;
        margin-bottom:20px;
    }
    .rankingSide ul li{
        width: 32%;
        margin-right:1%;
    }
    .rankingSide ul li:nth-child(3n){
        margin-right:none;
    }
    .rankingSide ul li a{
        line-height: 1.2;
        padding: 10px 0;
    }

    .accordionHead div{
        line-height: 1.2;
        padding: 10px 0;
    }
    .accordionHead div:after {
        top: 11px;
    }
    .accordionHead ul{
        display: none;
        padding: 5px 0px;
    }
    .accordionHead ul li{
        width:100% !important;
    }
    .accordionHead ul li a{
        padding: 5px 0;
    }

    #rankingOverlay{
        display: none;
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        z-index: 10001;
    }

    .rankingSide ul.memonessLink li {
        margin-right: 0%;
    }

    div.tit_memoness_rankingHead_right p {
        font-size: 18px;
        line-height: 1.2;
    }
    div.tit_memoness_rankingHead_right p.small {
        margin-bottom:10px;
    }
    div.tit_memoness_rankingHead_right p.red{
        font-size: 18px;
    }
    div.tit_memoness_rankingHeadBox img {
        width: 60px;
    }

    .rankingSide .memoness_ranking_inner ul {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        margin-bottom: 20px;
        margin-left: 15px;
        box-sizing: border-box;
    }
    .rankingSide .memoness_ranking_inner .accordionHead ul{
        display: none;
    }
    .during_memoness {
        background: #e6e6e6;
        top: -3px;
    }
    .memoness_ranking_inner ul.commonLink li a:before {
        content: "";
        display: inline-block;
        margin-right: 0;
    }
    .memoness_ranking_inner .accordionHead div:before {
        content: "";
        display: inline-block;
        margin-right: 0;
    }
    .memoness_ranking_inner ul.commonLink li.accordionHead ul li a:before {
        content: "-";
        display: inline-block;
        margin-right: 10px;
    }
    .memoness_ranking_inner ul.commonLink li.accordionHead ul{
        margin-left: 0px;
    }

    .rankingList.allList .accordion_rnk li {
        justify-content: flex-start;
    }
    .memoness_record_all{
        display: block;
    }
    .memoness_record_all .flex:last-child:before{
        content:"";
        margin-right:0;
    }


    /*----------------
    notification
    ---------------- */
    div.notification_sp{
        display: block;
        position: absolute;
        top: 28px;
        right: calc( 2.5% + 65px);
    }
    div.notification_sp i{
        font-size:18px;
    }
    div.notification_sp a{
        color:#000;
    }
    a.ntfctn_on:before{
        top: -4px;
        right: -7px;
    }
    .ntfctnList{
       max-height: inherit;
        overflow:visible;
    }
    .ntfctnPage{
        width: 100%;
        display: none;
        border-right: 0px solid #f4f4f4;
        border-left: 0px solid #f4f4f4;
    }
    .ntfctnPage.active{
        display: block;
    }
    .tabLabel{
        cursor: pointer;
    }
    .tabLabel:hover{
        background: #ccc;
    }
    .tabLabel.active{
        background: #fff;
        height:70px;
        cursor: default;
    }
    .tabLabel.active:hover{
        background: #fff;
    }
    label.tabLabel.ntfctn_on div:after{
        position: absolute;
        top: -25px;
        left:0;
        right:0;
        margin:auto;
    }

    /*---------------------------
    playCommon
    --------------------------- */
    #CountDownBox.cardCountDown{
        padding-top: 32vh;
    }
        
    /*------------------------------------------------
    superadmin
    ------------------------------------------------- */
    .footBtn_userTable {
        padding: 10px 0 2px;
    }
    .footBtn_userTable div {
        text-align: center;
    }
    .footBtn_userTable .commonBtn {
        margin-right: 8px;
        margin-bottom: 8px;
    }


    .userSearchBox .wide_inner{
        display: block;
        text-align: center;
    }
    .userSearchBox h2{
        font-weight:bold;
        margin: 0 auto 5px;
    }
    .userSearchBox form{
        display: block;
        width: 100%;
    }
    table.members{
        width: 100%;
        margin: 0 auto 20px;
        text-align: left;
    }
    table.members th{
        font-size: 13px;
        padding: 0 15px 0 0;
        display: block;
    }
    table.members td{
        display: block;
    }
    table.members .commonSelect {
        width:120px;
        text-align: left;
        margin: 0;
    }
    .commentListCheck {
        position: absolute;
        top: -20px;
        left: calc( 2.5% - 4px);
    }

}

@media screen and (max-height: 600px){
    /*---------------------------
    playCommon
    --------------------------- */
    #CountDownBox.cardCountDown{
        padding-top: 11vh;
    }
}