@charset "utf-8";

/*========= スクロール途中からヘッダーの高さが小さくなるためのCSS ===============

.menu-logo{
display: none;
}*/

/*HeightMinというクラス名がついたら高さを小さく、上部固定に*/
#menuArea.HeightMin{
width: 100%;
position: fixed;
z-index: 999;/*最前面へ*/
animation: DownAnime 0.5s forwards;
background-color:rgba(255,255,255,0.9);
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#menuArea.HeightMin #site-logo{
display: block;
position: absolute;
top: 20px;
left: 30px;
}

#menuArea.HeightMin #site-logo img{
width: 320px;
}


@keyframes DownAnime{
from {
opacity: 0;
transform: translateY(-170px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* max-width: 1060px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 1060px){
#menuArea.HeightMin #site-logo img{
width: 250px;
}

#menuArea.HeightMin #site-logo{
top: 30px;
}

}
/* max-width: 1060px @end */


/* max-width: 879px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 879px){
#menuArea.HeightMin #site-logo img{
width: 200px;
}

#menuArea.HeightMin #site-logo{
top: 20px;
}

}
/* max-width: 879px @end */