@charset "UTF-8";

/* wao menu SP
------------------------------------------------------------------------- */

    #wao_menu_sp {
        width: 100%;
        position: relative;
        z-index: 11;
        box-sizing: border-box;
    }

    #wao_menu_sp * {
        font-family: "GenJyuuGothic-Bold", sans-serif;
    }

    #wao_menu_sp img {
        width: 100%;
        height: auto;
    }


    #wao_menu_sp #wao_menuBtn.wao_menuBtn_open {
        display: none;
    }

    #wao_menu_sp #wao_menuBtn.wao_menuBtn_open.open {
        display: block;
        width: 16vw;
        height: 16vw;
        max-width: 72px;
        max-height: 72px;
        position: absolute;
        top: 2vw;
        right: 2vw;
        z-index: 12;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
        background: url("/kodomo/open/tv/common/images/cmn_menu/wao_menu_open.png") no-repeat center 50% #5e8d43;
        background-size: contain;
    }

    #wao_menu_sp .wao_menuBtn_close {
        width: 16vw;
        height: 16vw;
        max-width: 72px;
        max-height: 72px;
        position: absolute;
        top: 2vw;
        right: 2vw;
        z-index: 12;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: none;
        background: url("/kodomo/open/tv/common/images/cmn_menu/wao_menu_close.png") no-repeat center 50%;
        background-size: contain;
    }

    #wao_menu_sp #wao_menuBtn.wao_menuBtn_open.fixed {
        position: fixed;
    }

/*     #index #wao_menu_sp #wao_menuBtn.wao_menuBtn_open, */
    #aboutwao #wao_menu_sp #wao_menuBtn.wao_menuBtn_open {
        display: none;
    }
    #index #wao_menu_sp #wao_menuBtn.wao_menuBtn_open {
        width: 13vw;
        height: 13vw;
        top: 8vw;
        right: 5%;
    }

    #index #wao_menu_sp #wao_menuBtn.wao_menuBtn_open.fixed,
    #aboutwao #wao_menu_sp #wao_menuBtn.wao_menuBtn_open.fixed {
        position: fixed;
        display: block;
        opacity: 0;
        animation-name: fadeIn;
        animation-duration: 0.5s;
        animation-timing-function: ease;
        animation-delay: 0.5s;
        animation-iteration-count: 1;
        animation-direction: normal;
        animation-fill-mode: forwards;
    }
    #index #wao_menu_sp #wao_menuBtn.wao_menuBtn_open.fixed {
        width: 16vw;
        height: 16vw;
    }

    @keyframes fadeIn {
        0% {
            opacity: 0.2
        }

        /*アニメーション開始時*/
        100% {
            opacity: 1
        }

        /*アニメーション終了時*/
    }


    #wao_menu_sp #wao_menuWrap {
        width: 100%;
        background: rgba(204, 204, 204, 0.80);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9;
    }



    #wao_menu_sp #wao_menuBox {
        width: 100%;
        margin: 2vw auto auto;
        border-bottom: 5px solid #fff;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
        display: block;
    }

    #wao_menu_sp #wao_menuBox .wao_menu_logo {
        width: 30%;
        margin: auto auto auto 2vw;
    }


    #wao_menu_sp #wao_menuBox .wao_menu_toggle {
        display: flex;
        justify-content: flex-start;
    }

    #wao_menu_sp #wao_menuBox .wao_menu_toggle h2 {
        width: 38%;
        border-radius: 10px 10px 0 0;
        margin-right: 1vw;
        padding: 6vw 2vw 3vw;
        display: flex;
    }

    #wao_menu_sp #wao_menuBox .wao_menu_toggle h2.on img {
        transform: translateY(-2vw);
    }

    #wao_menu_sp #wao_menuBox .wao_menu_toggle h2 img {
        margin: auto;
    }

    #wao_menu_sp #wao_menuBox .wao_menu_toggle h2.wao_menu_toggle_main {
        background: #5E8D43;
    }

    #wao_menu_sp #wao_menuBox .wao_menu_toggle h2.wao_menu_toggle_corner {
        background: #4EABDA;
    }

    #wao_menu_sp #wao_menuBox .wao_menu_main {
        display: none;
        width: 100%;
        background: #5E8D43;
        padding: 0 0 5vw;
    }

    #wao_menu_sp #wao_menuBox .wao_menu_corner {
        display: none;
        width: 100%;
        background: #4EABDA;
        padding: 3vw 0;
    }

    #wao_menu_sp #wao_menuBox .wao_menu_main.tabBox.on,
    #wao_menu_sp #wao_menuBox .wao_menu_corner.tabBox.on {
        display: block;
    }



    #wao_menu_sp #wao_menuBox .wao_menu_main li,
    #wao_menu_sp #wao_menuBox .wao_menu_corner li {
        width: 90%;
        margin: auto;
        background: url("/kodomo/open/tv/common/images/cmn_menu/sp/wao_menu_line.png") no-repeat left bottom;
        background-size: 100%;
    }

    #wao_menu_sp #wao_menuBox .wao_menu_main .linktxt {
        font-size: 4.2vw;
        line-height: 1;
        color: #fff;
        text-decoration: none;
        display: block;
        padding: 0.7em 0.5em 0.7em 1.5em;
        background: url("/kodomo/open/tv/common/images/cmn_menu/btn_iconR.png") no-repeat 0.5em 50%;
        background-size: 1em;
    }

    #wao_menu_sp #wao_menuBox .wao_menu_corner .linktxt {
        font-size: 5vw;
        line-height: 1;
        color: #fff;
        text-decoration: none;
        display: flex;
        align-items: center;
        padding: 0.25em 0.5em 0.25em 1.5em;
        min-height: 2.6em;
        background: url("/kodomo/open/tv/common/images/cmn_menu/btn_iconR.png") no-repeat 0.5em 50%;
        background-size: 1em;
    }

    /* #wao_menu_sp #wao_menuBox .wao_menu_main .wao_menu_mainList {
        
        }
        #wao_menu_sp #wao_menuBox .wao_menu_corner .wao_menu_mainList{
        
        } */

    #wao_menu_sp #wao_menuBox .wao_menu_main .wao_menu_mainList .linktxt::before {
        content: "";
        display: inline-block;
        width: 2em;
        height: 2em;
        vertical-align: middle;
        margin-right: 0.5em;
    }

    #wao_menu_sp #wao_menuBox .wao_menu_main .wao_menu_mainList .wao_menu_sub_home .linktxt::before {
        background: url("/kodomo/open/tv/common/images/cmn_menu/sp/menu_icon_home.png") no-repeat center 50%;
        background-size: 100%;
    }

    #wao_menu_sp #wao_menuBox .wao_menu_main .wao_menu_mainList .wao_menu_sub_program .linktxt::before {
        background: url("/kodomo/open/tv/common/images/cmn_menu/sp/menu_icon_program.png") no-repeat center 50%;
        background-size: 100%;
    }
    #wao_menu_sp #wao_menuBox .wao_menu_main .wao_menu_mainList .wao_menu_sub_time .linktxt::before {
        background: url("/kodomo/open/tv/common/images/cmn_menu/sp/menu_icon_time.png") no-repeat center 50%;
        background-size: 100%;
    }
    #wao_menu_sp #wao_menuBox .wao_menu_main .wao_menu_mainList .wao_menu_sub_friends .linktxt::before {
        background: url("/kodomo/open/tv/common/images/cmn_menu/sp/menu_icon_friends.png") no-repeat center 50%;
        background-size: 100%;
    }
    #wao_menu_sp #wao_menuBox .wao_menu_main .wao_menu_mainList .wao_menu_sub_minogashi .linktxt::before {
        background: url("/kodomo/open/tv/common/images/cmn_menu/sp/menu_icon_minogashi.png") no-repeat center 50%;
        background-size: 100%;
    }
    #wao_menu_sp #wao_menuBox .wao_menu_main .wao_menu_mainList .wao_menu_sub_next .linktxt::before {
        background: url("/kodomo/open/tv/common/images/cmn_menu/sp/menu_icon_next.png") no-repeat center 50%;
        background-size: 100%;
    }
    #wao_menu_sp #wao_menuBox .wao_menu_main .wao_menu_mainList .wao_menu_sub_sns .linktxt::before {
        background: url("/kodomo/open/tv/common/images/cmn_menu/sp/menu_icon_sns.png") no-repeat center 50%;
        background-size: 100%;
    }

    #wao_menu_sp #wao_menuBox .wao_menu_main .wao_menu_mainList .wao_menu_sub_goods .linktxt::before {
        background: url("/kodomo/open/tv/common/images/cmn_menu/sp/menu_icon_goods.png") no-repeat center 50%;
        background-size: 100%;
    }

    #wao_menu_sp #wao_menuBox .wao_menu_main .wao_menu_mainList .wao_menu_sub_contact .linktxt::before {
        background: url("/kodomo/open/tv/common/images/cmn_menu/sp/menu_icon_contact.png") no-repeat center 50%;
        background-size: 100%;
    }

    #wao_menu_sp #wao_menuBox .wao_menu_main .wao_menu_mainList .wao_menu_sub_btn {
        padding: 1em 0;
    }

/*     #wao_menu_sp #wao_menuBox .wao_menu_main .wao_menu_mainList .wao_menu_sub_btn .linkbtn {
        display: block;
        width: 54%;
        max-width: 305px;
    } */


    .bgScreen {
        background: rgba(0, 0, 0, 0.5);
        width: 100%;
        height: 100vh;
        position: absolute;
        top: 0;
        z-index: 11;
        overflow: auto;
    }

    .bgScreen.fixed {
        position: fixed;
    }



/* wao menu SP
------------------------------------------------------------------------- */