@charset "utf-8";
.hamburger {
position: absolute;
right: 24px;
top: 22px;
width: 20px;
height: 40px;
cursor: pointer;
z-index: 300;
}

.hamburger__line {
position: absolute;
width: 26px;
height: 2px;
right: 0;
background-color: #555;
transition: all 0.5s;
}

.hamburger__line--1 {
top: 6px;
}

.hamburger__line--2 {
top: 16px;
}

.hamburger__line--3 {
top: 26px;
}

.open .hamburger__line--1 {
transform: rotate(-45deg);
top: 11px;
}

.open .hamburger__line--2 {
opacity: 0;
}

.open .hamburger__line--3 {
transform: rotate(45deg);
top: 11px;
}

/* sp-nav =================================== */
.sp-nav {
position: fixed;
right: -100%; /*ハンバーガーがクリックされる前はWindow右側に隠す*/
top: 0;
width: 70%; /* 出てくるスライドメニューの幅 */
height: 100vh;
background-color: whitesmoke;
transition: all 0.5s;
z-index: 200;
overflow-y: auto; /* メニューが多くなったらスクロールできるように */
}

/*ハンバーガーがクリックされたら右からスライド*/
.open .sp-nav {
right: 0;
}

.sp-nav p{
    text-align: left;
    margin-top: 1rem;
}

.sp-navlist{
    margin: 1.2rem 2rem;
}

.menu-category{
    margin-bottom: 1.6rem;
}

.menu-title{
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 2px;
}

.menu-subtitle{
    color: #333;
    margin: 0.3rem 0;
    padding-left: 1rem;
    font-size: 14px;
    letter-spacing: 2px;

}


.menu-subtitle img{
    font-size: 14px;
}

#menu-sns{
    display: flex;
    justify-content: space-around;
}


/* black-bg(ハンバーガーメニュー解除用bg) =================================== */
.black-bg {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 5;
background-color: #000;
opacity: 0;
visibility: hidden;
transition: all 0.5s;
cursor: pointer;
z-index: 100;
}

/*ハンバーガーメニューが開いたら表示*/
.open .black-bg {
opacity: 0.3;
visibility: visible;
}




    #tb_pc_menu{
        background-color: #000;
    }

    .tb_pc_menu-subtitle{
        color: #fff;
        font-size: 14px;
        letter-spacing: 2px;
        padding-left: 1rem;
    }

    .tb_pc_menu > li.menu__single {
        position: relative;
    }
    
    li.menu__single ul.menu__second-level {
        position: absolute;
        top: 40px;
        width: 100%;
        background-color: #333;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        color: #555;
    }
    
    li.menu__single:hover ul.menu__second-level {
        top: 50px;
        visibility: visible;
        opacity: 1;
    }

    .tb_pc_menu {
        position: relative;
        width: 100%;
        height: 50px;
        max-width: 1000px;
        margin: 0 auto;
    }
    
    .tb_pc_menu > li {
        float: left;
        width: 25%; /* グローバルナビ4つの場合 */
        height: 50px;
        line-height: 50px;
        background: #000;
        font-weight: normal;
    }
    
    .tb_pc_menu > li a {
        display: block;
        color: #fff;
        padding-left: 1rem;
        font-weight: normal;
    }
    
    .tb_pc_menu > li a:hover {
        color: rgb(252, 11, 83);
    }
    
    ul.menu__second-level {
        visibility: hidden;
        opacity: 0;
        z-index: 1;
    }
    
    ul.menu__third-level {
        visibility: hidden;
        opacity: 0;
    }
    
    ul.menu__fourth-level {
        visibility: hidden;
        opacity: 0;
    }
    
    .tb_pc_menu > li:hover {
        background: #000;
        -webkit-transition: all .5s;
        transition: all .5s;
    }
    
    .menu__second-level li {
        border-top: 1px solid #555;
    }
    
    .menu__third-level li {
        border-top: 1px solid #555;
    }
    
    .menu__second-level li a:hover {
        background: #000;
    }
    
    .menu__third-level li a:hover {
        background: #ffff;
    }
    
    .menu__fourth-level li a:hover {
        background: #fff;
    }
    
    /* 下矢印 */
    .init-bottom:after {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        margin: 0 0 4px 12px;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    
    /* floatクリア */
    .tb_pc_menu:before,
    .tb_pc_menu:after {
        content: " ";
        display: table;
    }
    
    .tb_pc_menu:after {
        clear: both;
    }
    
    .tb_pc_menu {
        *zoom: 1;
    }