【プログラミング・Web制作勉強ログ#150】9/17の積み上げ成果（HTML/Sass ハンバーガーメニューエラー調査中、ブログ整理、交流会）

<div class="c-hamburger u-mq-display__pc--none">
        <span></span>
</div>

/* c-hamburger
--------------------------- */
@include sp {
        .c-hamburger {
                background: $c-main;
                width: 40px;
                height: 24px;
                box-sizing: border-box;
                position: fixed;
                right: 0;
                top: 0;
                padding: 13px 20px;
                cursor: pointer;
                z-index: 9998;
                span, span::before, span::after {
                        content: '';
                        position: absolute;
                        width: 35px;
                        height: 5px;
                        border-radius: 2px;
                        background: #fff;
                        display: block;
                        z-index: 9999;
                        transition: all 0.4s;
                }
                span::before {
                        bottom: -12px;
                }
                span::after {
                        bottom: -24px;
                }
                &.active span {
                        -webkit-transform: translateY(12px) rotate(-45deg);
                        transform: translateY(12px) rotate(-45deg);
                }
                &.active span:before {
                        -webkit-transform: translateY(-8px) rotate(45deg);
                        transform: translateY(-8px) rotate(45deg);
                        opacity: 0;
                }
                &.active span:after {
                        -webkit-transform: translateY(-24px) rotate(45deg);
                        transform: translateY(-24px) rotate(90deg);
                }
        }
}