/**
 * ==========================================================================
 *
 * Index
 *
 * 2cols
 * 1col
 * on scroll
 * Default header and menu. Simple header and menu.
 * Primary menu.
 * Attribute data-type accordion
 * Javascript disable. primary menu
 * Widget Navigation Menu
 * Table of contents
 *
 * ==========================================================================
 *
 * dinamic attribute
 *
 * data-direction="horizontal" ( default )
 *      For PC view horizontal menu
 * data-direction="vertical"
 *      For Mobile view vertical menu ( need javascript )
 * data-type="accordion"
 *      caret click show child
 *      If there is no accordion class, the child menu will be displayed on the right.
 *
 * ==========================================================================
 */
.primary-menu-wrapper{
    max-width:100%;
}
/**
 * 1col
 * ========================================================================== */
.emulsion-no-sidebar{
    .primary-menu-wrapper{
        display:flex;
        flex-wrap:wrap;
        margin-right:auto;
        margin-left:auto;
        .menu-placeholder:nth-child(1):nth-last-child(1){
            position:absolute;
            right:0;
            z-index:1;
            width:var( --thm_sidebar_width, 400px );
            min-width:var( --thm_sidebar_width, 400px );
            max-width:100%;
        }
        nav[class|="menu"]{
            flex:1 1 auto;
        }
        &.menu-inactive{
            display:none;
            .menu-placeholder{
                display:none;
            }
        }
        .menu-placeholder:empty{
            display:none;
        }
        .menu-placeholder{
            position:absolute;
            right:0;
            bottom:0;
            z-index:1;
            flex:1 1 auto;
            width:var(--thm_content_min_width, 296px);
            min-width:var(--thm_content_min_width, 296px);
            text-align:right;
        }
        .menu-simple-container{
            ul.wp-nav-menu{
                &[data-direction="horizontal"]{
                    width:auto;
                }
            }
        }
    }
    .header-layer{
        .menu-simple-container{
            .menu{
                margin-top:0;
            }
        }
    }
    &.on-scroll{
        .menu-active{
            max-width: 100vw;
        }
    }
}
/**
 * menu-placeholder action basic style
 * like on click something change.
 * template part: header-custom.php
 * action:header_menu_placeholder
 */
.menu-placeholder{
    & > [id]:not(input){
        box-sizing:content-box;
        display:inline-block;
        padding:.74rem;
    }
}
/**
 * on scroll
 * ========================================================================== */
.on-scroll[class]{
    .primary-menu-wrapper{
        .menu-placeholder{
            [for="toc-toggle"]{
                box-sizing:content-box;
                padding-top:.74rem;
                padding-bottom:.74rem;
            }
        }
        nav{
            & > ul{
                li{
                    box-sizing:content-box;
                    // padding-top:.92rem;
                    // padding-bottom:.92rem;
                }
            }
        }
    }
    &.logged-in{
        .menu-active{
            margin-top:32px;
        }
        &.customize-partial-edit-shortcuts-shown{
            .header-layer-site-title-navigation{
                top: 0;
            }
            .template-part-header{
                .header-layer-site-title-navigation{
                    top:0;
                }
            }
        }

        .template-part-header{
            .header-layer-site-title-navigation{
                top: 32px;
            }
        }
    }
    &.customize-partial-edit-shortcuts-hidden.logged-in,
    &.customize-partial-edit-shortcuts-shown.logged-in{
        .menu-active{
            margin-top:0;
        }
    }
    .menu-active{
        position: fixed;
        top: 0;
        right:0;
        left:0;
        z-index: 1000;
        margin-top:0;
        margin-bottom:0;
        .primary{
            margin-top:0;
            margin-bottom:0;
            & > li{
                border-bottom:none;
            }
        }
    }
    .template-part-header{
        .header-layer-site-title-navigation{
            position: fixed;
            top: 0;
            z-index: 10;
            width:100vw;
        }
    }
}
/**
 * Default header and menu. Simple header and menu.
 * ========================================================================== */
header{
    &.template-part-header-custom ~ .primary-menu-wrapper{
        nav[class|="menu"]{
            ul[data-direction="horizontal"]{
                justify-content: center;
            }
        }
    }
    &.template-part-header{
        // simple header
        &.header-layer-nav-menu{
            nav[class|="menu"]{
                width:auto;
            }
        }
        ul[data-direction="horizontal"]{
            justify-content: flex-end;
        }
        nav[class|="menu"]{
            background:transparent;

            .wp-nav-menu.primary{
                &[data-type="accordion"]{
                    & > li{
                        .sub-menu,
                        .children{
                            // margin-top:.9rem;
                        }
                    }
                }
            }
        }
    }
}
/**
 * Primary menu.
 * ========================================================================== */
nav[class|="menu"]{
    max-width:100%;
    padding-right:0;
    padding-left:0;
    // @extend %block_main_wide;
    //@include font_size(5, no-margin);
   // font-size:var(--thm_meta_data_font_size, 13px);
   // font-family:var(--thm_meta_data_font_family);
   // text-transform:var(--thm_meta_data_font_transform);

    margin:0 auto 0;
    .children:focus-within,
        .sub-menu:focus-within,
        &:not(.has-chckbox-control) .wp-nav-menu li.menu-item-has-children a:focus ~ .sub-menu,
        &:not(.has-chckbox-control) .wp-nav-menu li.menu-item-has-children a:focus ~ .children,
        &:not(.has-chckbox-control) .wp-nav-menu li.menu-item-has-children:hover > .sub-menu,
        &:not(.has-chckbox-control) .wp-nav-menu li.menu-item-has-children:hover > .children{
        display:block; //EDGE
        height:auto;
        clip:auto;
        clip-path: none;
    }
    // input type checkbox element Added from jQuery
    &.has-chckbox-control{
        .wp-nav-menu{
            margin-top:0;
            margin-bottom:0;
            li{
                box-sizing:content-box;

                list-style:none;
                // for click control
                .nav-menu-child-opener:checked ~ .children .menu-item-has-children,
                    .nav-menu-child-opener:checked ~ .children,
                    .nav-menu-child-opener:checked ~ .sub-menu{
                    display:block; //EDGE
                    height:auto;
                    clip:auto;
                    clip-path: none;
                    visibility:visible;
                }
            }
            &[data-direction="vertical"]{
                .nav-menu-child-opener:checked ~ .children  .menu-item-has-children .nav-menu-child-opener-label:before,
                    .nav-menu-child-opener:checked ~ .sub-menu  .menu-item-has-children .nav-menu-child-opener-label:before{
                    transform: rotate(0deg);
                }
            }
        }
    }
    ul.wp-nav-menu{
        max-width:100%;
        padding-right:0;
        //@extend %block_main_wide;
        padding-left:0;
        margin-top:0;
        margin-bottom:0;
        & > li{
            box-sizing:content-box;
            margin:0 var(--thm_box_gap, 3px) 0;
            // padding-top:15px;
            // padding-bottom:14px;
            list-style:none;
            &:not(.menu-item-has-children) a{
                display:inline-block;
            }
            & > a{
                display:inline-block;
                padding:.88rem 0 .88rem .88rem;
            }
        }
        li ul{
            @include clip;
            display:none;
            width:100%;
            text-align:left;//EDGE
        }
        &[data-direction="horizontal"]{
            display:flex;
            flex-wrap:wrap;
            width:calc(100vw - 100px);
            padding-right:0;
            & > li{
                box-sizing:border-box;
                display:inline-block;
                flex:0 1 auto;
                width:auto;
                padding-right:1rem;
                padding-left:1rem;
                text-align:center;
                z-index:7;
            }
            li{
                position:relative;
                list-style:none;
                .sub-menu,
                .children{
                    position:absolute;
                    left:0;
                    z-index:9999;
                    width:auto;
                    min-width:100%;
                    max-width:var(--thm_sidebar_width, 400px);
                    padding-right:0;
                    //  margin-top:.88rem;
                    padding-left:0;
                    margin:0;
                    margin-bottom:0;
                    overflow:visible;
                    li{

                        margin-top:0;
                        margin-bottom:0;
                        &.show-left{
                            &.menu-item-has-children a:focus ~ .sub-menu,
                                &.menu-item-has-children a:focus ~ .sub-menu,
                                &.menu-item-has-children:hover > .sub-menu,
                                &.menu-item-has-children:hover > .children{
                                left:-100%;
                            }
                        }
                        & > a{
                            display:inline-block;
                            padding:.88rem;
                        }
                    }
                    .sub-menu,
                    .children{
                        top:0;
                        left:100%;
                        z-index:9999;
                        padding-right:0;
                        padding-left:.0;
                        li{

                            margin-top:0;
                            margin-bottom:0;
                            &.show-left{
                                &.menu-item-has-children a:focus ~ .sub-menu,
                                    &.menu-item-has-children a:focus ~ .sub-menu,
                                    &.menu-item-has-children:hover > .sub-menu,
                                    &.menu-item-has-children:hover > .children{
                                    left:-100%;
                                }
                            }
                            & > a{
                                display:inline-block;
                                padding:.88rem;
                            }
                        }
                        .sub-menu,
                        .children{
                            left:100%;
                            z-index:9999;
                            width:100%;
                            li{

                                margin-top:0;
                                margin-bottom:0;
                                &.show-left{
                                    &.menu-item-has-children a:focus ~ .sub-menu,
                                        &.menu-item-has-children a:focus ~ .sub-menu,
                                        &.menu-item-has-children:hover > .sub-menu,
                                        &.menu-item-has-children:hover > .children{
                                        left:-100%;
                                    }
                                }
                                & > a{
                                    display:inline-block;
                                    padding:.88rem;
                                }
                            }
                        }

                    }
                }
                &.menu-item-has-children{
                    padding-right:0;
                }
            }
        }
        &.top-right[data-direction="horizontal"]{
            & > li{
                & > .sub-menu,
                & > .children{

                    left: 0;
                }
            }
            .sub-menu,
            .children{
                .sub-menu,
                .children{
                    left: -100%;
                    width:100%;
                }
            }
        }
        &[data-direction="vertical"]{
            &.primary{
                padding-right: var(--thm_content_gap, 24px);
                padding-left: var(--thm_content_gap, 24px);
            }
            li{
                position:relative;
                display:list-item;
                width:100%;
                list-style:none;
                & > .sub-menu,
                & > .children{
                    position:relative;
                    left:0;
                    z-index:9999;
                    width:auto;
                    min-width:100%;
                    max-width:var(--thm_sidebar_width, 400px);
                    padding-right:.5rem;
                    padding-left:.5rem;
                    margin:1rem 0 0;
                    margin-bottom:0;
                    overflow:visible;
                    li{
                        box-sizing:border-box;
                        padding:.5rem;
                    }
                    .menu-item-has-children{
                        font-weight:700;
                        .menu-item-has-children{
                            border:none;
                        }
                        .sub-menu,
                        .children{
                            font-weight:normal;
                        }
                    }
                    .sub-menu,
                    .children{
                        position:relative;
                        padding-right:0;
                        padding-left:.0;
                        .sub-menu,
                        .children{
                            left:0;
                            width:100%;
                            margin-right:0;
                            margin-left:0;
                        }
                    }
                }
            }
        }
    }
}
/**
 * Attribute data-type accordion
 * Arrange so that sub-menu and children fit within the width of level0. in PC view
 * If accordion is not specified for data-type, sub-menu children are displayed outside level0. in PC view
 * ========================================================================== */
.emulsion:not(.noscript){
    nav[class|="menu"]{
        &.has-chckbox-control{
            .wp-nav-menu{
                &[data-type="accordion"]{
                    & > li{
                        .sub-menu,
                        .children{
                            position:absolute;
                            //margin-top:.88rem;
                            .sub-menu,
                            .children{
                                position:static;
                                left:0;
                                padding-bottom:0;
                                li{
                                    padding-right:0;
                                    &:first-child{
                                        //padding-top:0;
                                    }
                                    &:last-child{
                                        border-bottom:none;
                                        // padding-bottom:0;
                                    }
                                }
                                .sub-menu,
                                .children{
                                    left:0;
                                }
                            }
                        }
                    }
                    &[data-direction="vertical"]{
                        & > li{
                            .sub-menu,
                            .children{
                                position:relative;/// 変更点
                                max-width:100%;
                            }
                        }
                    }
                }
            }
        }
    }
}
.emulsion:not(.noscript){
    .template-part-header{
        nav[class|="menu"]{
            &.has-chckbox-control{
                .wp-nav-menu{
                    &[data-type="accordion"]{
                        & > li{
                            .sub-menu,
                            .children{
                                .sub-menu,
                                .children{
                                    li{
                                        &:first-child{
                                            padding-top:0.88rem;
                                        }
                                        &:last-child{
                                            padding-bottom:0;
                                            border-bottom:none;
                                        }
                                    }
                                    left:0;
                                    .sub-menu,
                                    .children{
                                        left:0;
                                    }
                                }

                            }
                        }
                    }
                }
            }
        }
    }
}
/**
 * Javascript disable. primary menu
 * ========================================================================== */
.noscript{
    nav[class|="menu"]{
        ul.wp-nav-menu{
            /**
             * When list hover, Sub menu show
             */
            &[data-direction="horizontal"]{
                li{
                    & > a{
                        display:inline-block;
                        padding:.88rem 0 .88rem .88rem;
                    }
                    .sub-menu,
                    .children{
                        margin-top:0;
                        visibility:hidden;
                        & > a{
                            display:inline-block;
                            padding:.88rem 0 .88rem .88rem;
                        }
                        .sub-menu,
                        .children{
                            margin-right:0;
                            margin-left:0;
                            & > a{
                                display:inline-block;
                                padding:.88rem 0 .88rem .88rem;
                            }

                        }

                    }
                    &.menu-item-has-children:hover > .sub-menu,
                        &.menu-item-has-children:hover > .children{
                        display:block; //EDGE
                        height:auto;
                        clip:auto;
                        clip-path: none;
                        visibility:visible;

                    }
                    &.show-left{
                        &.menu-item-has-children:hover > .sub-menu,
                            &.menu-item-has-children:hover > .children{
                            left:-100%;
                        }
                    }
                }

                li:focus,
                    li:focus-within{
                    .sub-menu,
                    .children{
                        display: block;
                        margin-top:0;
                        visibility:visible;
                        opacity: 1;
                        .sub-menu:focus,
                            .children:focus{
                            display: block;
                            margin-right:0;
                            margin-left:0;
                            visibility:visible;
                            opacity: 1;
                        }
                    }
                }
            }
        }
    }
    .template-part-header{
        .header-layer-nav-menu{
            .wp-nav-menu.primary{
                & > li{
                    position:relative;
                    &.menu-item-has-children{
                        .sub-menu,
                        .children{
                            position:absolute;
                            left:0;
                            width:auto;

                        }
                    }
                }
                .menu-item-has-children{
                    position:relative;
                    .sub-menu,
                    .children{
                        position:absolute;
                        left:-100%;
                        width:auto;
                        a{
                            box-sizing:border-box;
                            display:block;
                            width:100%;
                        }
                        .sub-menu,
                        .children{
                            a{
                                display:block;
                                width:100%;
                            }
                            left:-100%;
                            .sub-menu,
                            .children{
                                a{
                                    display:block;
                                    width:100%;
                                }
                                left:-100%;
                            }
                        }
                    }
                }
            }
        }
    }
}
/**
 * Widget Navigation Menu
 * ========================================================================== */
.header-layer-nav-menu{
    position:absolute;
    z-index:6;
    display:inline-block;
    width:60vw;
    text-align:right;
    ul.wp-nav-menu{
        &.top-right[data-direction="vertical"]{
            width:var(--thm_content_min_width, 296px);
            width:calc(100vw - 72px);
            margin-right:0;
        }
        &.top-right[data-direction="horizontal"]{
            margin-right:0;
        }
    }
}
/**
 * Table of contents
 * ========================================================================== */
.toc,
body:not(.on-scroll) input[type="checkbox"][data-skin="inset"][id="toc-toggle"] ~ .toc,
body:not(.on-scroll) input[type="checkbox"][data-skin="inset"][id="toc-toggle"] + label span,
body:not(.on-scroll) input[type="checkbox"][data-skin="inset"][id="toc-toggle"] + label,
body:not(.on-scroll) .toc{
    display:none;
}
body.on-scroll input[type="checkbox"][data-skin="inset"][id="toc-toggle"] + label span,
body.on-scroll input[type="checkbox"][data-skin="inset"][id="toc-toggle"] + label{
    display:inline-block;
}
body.on-scroll  input[type="checkbox"][data-skin="inset"][id="toc-toggle"]:checked ~ .toc {
    position:absolute;
    right:0;
    z-index:2;
    display:inline-block;
    width: var(--thm_sidebar_width);
    text-align:left;
}
.on-scroll .toc {
    top:52px;
}
.toc a:empty:before{
    content:var(--thm_i18n_no_title, 'No Title');
}
span[id|="toc"]{
    width:1px;
}
.toc .toc-h2 {
    margin-left: 10px
}
.toc .toc-h3 {
    margin-left: 20px
}
.toc .toc-h4 {
    margin-left: 30px
}
input[type="checkbox"][data-skin] + label{
    display:block;
    padding-right:0;
    padding-left:0;
    margin:0 var(--thm_content_gap, 24px);
    clear:both;
    vertical-align:middle;
}
input[type="checkbox"][data-skin] {
    display:none;
}
input#primary-menu-controll{
    position:absolute;
    top:-100px;
    left:-50px;
    display:block;
    // don't change relate tab control
    visibility:visible;
}
.menu-short-container:focus-within{
    visibility:visible;
}
input[type="checkbox"][data-skin="inset"] + label span{
    position:relative;
    top: 0;
    display:inline-block;
    width: 24px;
    height: 24px;
    margin:0 0 0 0;
    vertical-align: middle;
    cursor: pointer;
    border:2px solid;
    border-radius: calc(12px + 4px);
    //background:rgba(188, 188, 188, .5);
}
input[type="checkbox"][data-skin="inset"] + label{
    display:inline-block;
}
input[type="checkbox"][data-skin="inset"] + label span:after {
    position: absolute;
    top: 6px;
    left: 5px;
    width: 9px;
    height: 5px;
    content: '';
    background: transparent;
   // -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    border: 3px solid var(--thm_black_color);
    border-top: none;
    border-right: none;
    opacity: 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
input[type="checkbox"][data-skin="inset"]:checked + label span{
    background:#16a085;
    &:after{
        border: 3px solid var(--thm_white_color, #ffffff);
        border-top: none;
        border-right: none;
    }
}
input[type="checkbox"][data-skin="inset"]:checked + label span:hover:after {
    opacity: 0.3;
}
input[type="checkbox"][data-skin="inset"]:checked + label span:after {
    opacity: 1;
}

//body{
    body .template-part-header-custom{
        & + .primary-menu-wrapper{

            &.menu-is-light,
            &.menu-is-dark{
                color:var(--thm_primary_menu_color);
                background:var(--thm_primary_menu_background);
                a{
                    color:var(--thm_primary_menu_link_color);
                    &:hover{
                        color:var(--thm_primary_menu_color);
                    }
                }
            }
        }
    }
//}
.menu-is-dark,
.menu-is-light{
    .menu-main-container{
        color:var(--thm_primary_menu_color);
        background:var(--thm_primary_menu_background);
        a{
            color:var(--thm_primary_menu_link_color);
        }
    }
}