Newer
Older
hoge / testpage / responsive.css
/* @media screen and (max-width: 1024px){
    #hamburger-menu{
        opacity: 0;
        position: fixed;
    }
    label .buns{
        position: fixed;
        top: 0.8em;
        right: 1em;
        z-index:3;
        height: 2em;
        width: 2em;
    }
    label .buns::before,
    label .buns::after,
    label .buns .patty {
        position: absolute;
        left: 0;
        width: 100%;
        height: 4px;
        border-radius: 5px;
        background: #333;
        content: "";
        transition:all .3s;
    }
    label .buns::before{
        top: 0;
        transform-origin: top left;
    }
    label .buns .patty{
        top: 45%;
    }
    label .buns::after{
        bottom: 0;
        transform-origin: bottom left;
    }
    .header-nav nav ul{
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 2;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: flex-start;
        transform: translateX(-120%);

    }
    .bd-no{
        display: none;
    }
    .header-nav nav ul::before{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        width: 25em;
        background: rgb(172, 255, 234);
        transform: skewX(-20deg) translateX(-200%);
        transform-origin: bottom left;
        transition:  transform.3s;
        content: "";
    }
    .header-nav nav ul li{
        margin: 1em 1em;
        padding: 0.2em 1em;
        transform: translateX(-120%);
        transition: all .3s, transfrom .5s;
        transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    }
    #hamburger-menu:checked + label .buns::before,
    #hamburger-menu:checked + label .buns::after{
        width: 130%;
    }
    #hamburger-menu:checked + label .buns .patty{
        transform: scale(0);
    }
    #hamburger-menu:checked + label .buns::before {
        transform: rotate(45deg);
    }
    #hamburger-menu:checked + label .buns::after {
        transform: rotate(-45deg);
    }
    #hamburger-menu:checked ~ nav ul{
        transform:translateX(0%);
    }
    #hamburger-menu:checked ~ nav ul::before {
        transform: skewX(-20deg) translateX(-60%);
    }
    #hamburger-menu:checked ~ nav ul li{
        transform: translateX(0);
    }
    #hamburger-menu:checked ~ .light-dark{
        background: #000;
        opacity: .5;
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
    } */

    /* ------------fag--------- */
    /* div.faq-list dl{
        width: 850%;
    }
    div.faq-list dl dd,div.faq-list dl dt{
        width: 100%;
        font-size: 1rem;
    }
    div.faq-list dl dt::after,
    div.faq-list dl dd::before,
    div.faq-list dl dt::before{
        font-size: 1.2rem;
    } */
    /* ------------fag-end--------- */

/* } */