@charset "UTF-8";

/* ハンバーガーメニューのボタン　*/

button  {
    margin-bottom: 0;
    display: none;
}

@media screen and (max-width:768px) {
    button  {
        margin-bottom: 0;
        font-size: 0;
    }
    button.is-open {
        background-color: #000;
    }
    .hamburger {
        width: 60px;
        height: 60px;
        display: block;
        position: relative;
        margin: 0;
        padding: 0;
        border-width: 0;
    }
    .hamburger::before {
        position: absolute;
        top: 20px;
        left: 20px;
        content: "";
        width: 25px;
        height: 1px;
        background-color:#000;
        transition: 0.4s;
    }
    .hamburger::after {
        position: absolute;
        bottom: 20px;
        left: 20px;
        content: "";
        width: 25px;
        height: 1px;
        background-color:#000;
        transition: 0.4s;
    }
    .hamburger span {
        position: absolute;
        top: 30px;
        left: 20px;
        content: "";
        width: 25px;
        height: 1px;
        background-color:#000;
        transition: 0.2s;
    }
    .hamburger.is-open::before {
        transform: rotate(315deg);
        top: 30px;
        background-color: #FFF;
    }
    .hamburger.is-open::after {
        transform: rotate(-315deg);
        top: 30px;
        background-color: #FFF;
    }
    .hamburger.is-open > span {
        display: none;
    }
}