/* -----------------------------------------------
SPヘッダアニメーション
----------------------------------------------- */


@media only screen and (max-width: 767px) {
    a.m_logo {
        display: inline-block;
        padding-top: 10px;
        position: absolute;
        top: 0;
        left: 10px;
    }
    .sideIc {
        width: 57px;
        height: 50px;
        background-color: #0072c1;
        position: relative;
    }
    .sideIc span {
        color: #fff;
        font-size: 7px;
        position: absolute;
        bottom: 2px;
        text-align: center;
        line-height: 1.3em;
        left: 0;
        right: 0;
        margin: 0 auto;
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    }
    .sideIc {
        display: inline-block;
        /*padding-top: 8px;*/
        position: absolute;
        top: -100px;
        left: 0;
    }
    .sideIc:before {
        content: '';
        width: 12px;
        height: 12px;
        border: 0;
        border-top: solid 3px #fff;
        border-right: solid 3px #fff;
        position: absolute;
        top: 25%;
        left: 34%;
        transform: translateX(-50%);
        -webkit- transform: translateX(-50%);
        margin-top: -4px;
        transform: rotate(45deg);
    }
    .sideIc.active:before {
        transform: rotate(-135deg);
        left: 40%;
    }
}

.shop{position:absolute; right:50px; top:10px;}
.shop ul{}
.shop ul li{float:left; margin-right:10px;}
.shop ul li img{width:30px;}

/*spロゴアニメーション（左スライド）*/
.m_logo {
    left: 15px;
}
.m_logo.mini {
    left: 10px !important;
}
.m_logo.disabled {
    left: 15px !important;
}

.m_logo.mini{
    -webkit-animation-name: logo_anime01;
    animation-name:logo_anime01;
    -webkit-animation-duration:1s;
    animation-duration:1s;
}
@-webkit-keyframes logo_anime01{
    from{
        left: 15px;
    }
    to {
        left: 68px !important;
    }
}
@keyframes logo_anime01{
    from{
        left: 15px;
    }
    to{
        left: 68px !important;
    }
}


.m_logo.disabled {
    -webkit-animation-name: logo_anime02;
    -webkit-animation-duration:1s;
    animation-name:logo_anime02;
    animation-duration:1s;
}
@-webkit-keyframes logo_anime02{
    from{
        left: 68px;
    }
    to {
        left: 15px !important;
    }
}
@keyframes logo_anime02{
    from{
        left: 68px;
    }
    to{
        left: 15px !important;
    }
}


/*サイドメニューICアニメーション（スライドイン）*/

.sideIc {
    top: -100px;
    -webkit-transition: all .5s;
    transition: all .5s;
}
.sideIc.mini {
    top: 0 !important;
    
}

.sideIc.disabled {
        pointer-events: none;
        top: -100px !important;
}

.sideIc.mini{
    display:none;
    -webkit-animation-name: ic_anime01;
    animation-name:ic_anime01;
    -webkit-animation-duration:1s;
    animation-duration:1s;
    animation-timing-function: linear;
}
@-webkit-keyframes ic_anime01 {
    from{
        top: -100px;
    }
    to {
        top: 0 !important;
    }
}
@keyframes ic_anime01 {
    from{
        top: -100px;
    }
    to{
        top: 0 !important;
    }
}



.sideIc.disabled{
    -webkit-animation-name: ic_anime02;
    -webkit-animation-duration:1s;
    animation-name:ic_anime02;
    animation-duration:1s;
}
@-webkit-keyframes ic_anime02{
    from{
        top: 0;
    }
    to {
        top: -100px !important;
    }
}
@keyframes ic_anime02{
    from{
        top: 0;
    }
    to {
        top: -100px !important;
    }
}