@charset "utf-8";

/*---------------------------
ハンバーガーメニュー
---------------------------*/

/*
コメントがあるところで細かく設定できます！
コメントなしのCSSはさわらないでください！
*/

.hamburger-position {
    position: fixed;
    top: 10px;
    right: 10px;
}

.hamburger {
    width: 100px; /* 横幅設定 */
    height: 100px; /* 高さ設定 */
    cursor: pointer;
    position: relative;
}

/* バーの共通設定 */
.hamburger span {
    width: 100%;
    height: 10%; /* ハンバーガーメニューのバーの太さ設定 */
    position: absolute;
    background: #333; /* 三本線の時の色 */
    transition: all 0.3s; /* 三本線の状態からXになるまでの時間設定 */
}

/* バーの初期位置 */
.hamburger-top-bar {
    top: 0px;
}
.hamburger-middle-bar {
    top: 50%;
    transform: translateY(-50%);
}
.hamburger-bottom-bar {
    bottom: 0px;
}

/* active付与時 トップバー */
.hamburger.active .hamburger-top-bar {
    top: 50%;
    transform: translateY(-50%);
    background :#333; /* Xの時の色 */
    transform: rotate(405deg); /* 回転設定 45 or 765に変更可 */
}

/* active付与時 ミドルバー */
.hamburger.active .hamburger-middle-bar {
    opacity: 0;
}

/* active付与時 ボトムバー */
.hamburger.active .hamburger-bottom-bar {
    top: 50%;
    transform: translateY(-50%);
    background: #333; /* Xの時の色 */
    transform: rotate(-405deg); /* 回転設定 -45 or -765に変更可 */
}

/*---------------------------
ハンバーガーメニューここまで
---------------------------*/