@charset "UTF-8";

/*メニュー全体*/
#box_MenuSpPc {

    width: 100%;
    background: rgb(0, 0, 0, 0.5);
    position: fixed;
    top: 0;

    z-index: 99999999;

    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;

    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

/*メニュータイトル＆メニューリスト*/
#box_MenuSpPc #ttl_MenuSpPc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    word-break: break-all;
}

#box_MenuSpPc #ttl_MenuSpPc .txt_link {
    color: rgb(255, 255, 255);
}

#box_MenuSpPc #menu_MenuSpPc #nav_list .mb_link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    word-break: break-all;

    border-bottom: 1px solid rgb(255, 255, 255);
    color: #FFF;
    width: 90%;
    padding: 0.8em;
}

#box_MenuSpPc #menu_MenuSpPc #nav_list .mb_link .txt_link {
    color: rgb(255, 255, 255);
}


#box_MenuSpPc #menu_MenuSpPc #nav_list .mb_link:hover,
#box_MenuSpPc #menu_MenuSpPc #nav_list .mb_link:active {
    background: rgba(255, 255, 255, .75);
}

#box_MenuSpPc #menu_MenuSpPc #nav_list .mb_link:hover .txt_link,
#box_MenuSpPc #menu_MenuSpPc #nav_list .mb_link:active .txt_link {
    color: rgb(0, 0, 0);
}

@media only screen and (min-width : 769px) {
    #box_MenuSpPc {
        opacity: 0;
        height: 60px;
        padding: 5px;
    }

    /*タイトルテキスト*/
    #box_MenuSpPc #ttl_MenuSpPc {
        min-width: 280px;
        font-size: var(--fs_s);
        color: rgb(253, 253, 253);

        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }

    /*メニューリスト*/
    #box_MenuSpPc #menu_MenuSpPc {
        -webkit-box-flex: 3;
        -ms-flex-positive: 3;
        flex-grow: 3;
    }

    #box_MenuSpPc #menu_MenuSpPc #nav_list {
        position: relative;
        width: 100%;
        font-size: var(--fs_s);
        color: rgb(253, 253, 253);
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;

        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    #box_MenuSpPc #menu_MenuSpPc #nav_list .mb_link {
        /*SP打消し*/
        border-bottom: none;
        color: #FFF;
        width: auto;
        padding: unset;

        height: 50px;

        border-bottom: 0;
        padding-left: 0.5em;
        padding-right: 0.5em;

        max-width: 7em;
        text-align: center;

        border-left: dotted 1px #ffffff;
    }

}

/*********
スマホスライドメニュー
*********/
/*ハンバーガーメニュー*/

/*メニューボタン全体*/
#btn_MenuSpPc {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/*メニューライン全体*/
#btn_MenuSpPc .box_line {
    position: relative;
    width: 44px;
    height: 44px;
    border: none;
    z-index: 9999999;
    cursor: pointer;

    margin-bottom: 0;
}

/*メニューライン線*/
#btn_MenuSpPc .box_line .list_line {
    position: absolute;
    width: 23px;
    top: 50%;
    left: 50%;
    margin-left: -11px;
}

#btn_MenuSpPc .box_line .list_line .line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: rgb(255, 255, 255);
    border-radius: 1px;
}

#btn_MenuSpPc .box_line .line:nth-of-type(1) {
    top: -8px;
}

#btn_MenuSpPc .box_line .line:nth-of-type(2) {
    top: -1px;
}

#btn_MenuSpPc .box_line .line:nth-of-type(3) {
    top: 6px;
}


/*メニュー動き*/
/*チェックボックス*/
#box_MenuSpPc .nav_label {
    display: none;
}

/*メニュークローズ用カバー*/
#box_MenuSpPc #nav_label--close {
    display: none;
    /*はじめは隠しておく*/
    position: fixed;
    z-index: 999998;
    top: 0;
    /*全体に広がるように*/
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    transition: .3s ease-in-out;
}

/*ハンバーガーメニュー*/
#btn_MenuSpPc .box_line,
#btn_MenuSpPc .box_line .line {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
}

#btn_MenuSpPc .list_line.active .line:nth-of-type(1) {
    -webkit-transform: translateY(6px) rotate(-315deg);
    transform: translateY(6px) rotate(-315deg);
}

#btn_MenuSpPc .list_line.active .line:nth-of-type(2) {
    opacity: 0;
}

#btn_MenuSpPc .list_line.active .line:nth-of-type(3) {
    -webkit-transform: translateY(-8px) rotate(315deg);
    transform: translateY(-8px) rotate(315deg);
}

#box_MenuSpPc #nav_content {
    overflow: auto;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999999;
    /*最前面に*/
    width: 94%;
    /*右側に隙間を作る（閉じるカバーを表示）*/
    max-width: 240px;
    /*最大幅（調整してください）*/
    height: 90%;
    background: #000;
    /*背景色*/
    transition: .3s ease-in-out;
    /*滑らかに表示*/
    -webkit-transform: translateX(105%);
    transform: translateX(105%);
    /*左に隠しておく*/
}

@media only screen and (min-width : 769px) {
    #box_MenuSpPc #menu_MenuSpPc #nav_content {
        width: 100%;
        position: relative;
        max-width: none;
        height: auto;
        transform: none;
        background: none;
    }
}


/*チェックが入ったらもろもろ表示*/
#box_MenuSpPc #nav_input {
    display: none;
}

#box_MenuSpPc #nav_input:checked~#nav_label--close {
    display: block;
    /*カバーを表示*/
    opacity: .5;
}
@media only screen and (min-width : 769px) {
    #box_MenuSpPc #nav_input:checked~#nav_label--close {
        opacity: 0;
    }
}

#box_MenuSpPc #nav_input:checked~#nav_content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    /*中身を表示（右へスライド）*/
    box-shadow: 6px 0 25px rgba(0, 0, 0, .15);
}

/*window restore*/
#box_MenuSpPc #menu_MenuSpPc #nav_list .nav_li i {
    font-size: var(--fs_ss);
    margin-left:0.25em;
}