@charset "utf-8";
/* CSS Document */
@media all and (min-width:801px) {
header{
    width: 100%;
    height: 100px;
    z-index: 99;
}
.logo{
    width: 100%;
    max-width: 189px;
    margin: auto auto auto 20px;
    padding-top: 20px;
    z-index: 1;
    background-color: #ffffff;
}
.logo a {
    width: 90%;
}
.logo img {
    width: 100%;
}
.menu-mail{
    position: fixed;
    width: 100px;
    height: 100px;
    top: 0;
    right:100px;
    background-color: #4c3320;
    text-align: center;
    z-index: 102;
    -webkit-transition:
        width 0.4s cubic-bezier(0.7, 0, 0.3, 1),
        height 0.4s cubic-bezier(0.7, 0, 0.3, 1),
        right 0.4s cubic-bezier(0.7, 0, 0.3, 1);
    -o-transition:
        width 0.4s cubic-bezier(0.7, 0, 0.3, 1),
        height 0.4s cubic-bezier(0.7, 0, 0.3, 1),
        right 0.4s cubic-bezier(0.7, 0, 0.3, 1);
    transition:
        width 0.4s cubic-bezier(0.7, 0, 0.3, 1),
        height 0.4s cubic-bezier(0.7, 0, 0.3, 1),
        right 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}
.menu-mail a {
    margin: 50px auto auto;
    -webkit-transition: margin 0.4s cubic-bezier(0.7, 0, 0.3, 1);
    -o-transition: margin 0.4s cubic-bezier(0.7, 0, 0.3, 1);
    transition: margin 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}
.menu-mail img {
    margin: 40px auto auto;
    -webkit-transition: margin 0.4s cubic-bezier(0.7, 0, 0.3, 1);
    -o-transition: margin 0.4s cubic-bezier(0.7, 0, 0.3, 1);
    transition: margin 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}
.is-scrolled .menu-mail{
    width: 60px;
    height: 60px;
    right:60px;
}
.is-scrolled .menu-mail a {
    margin: 20px auto auto;
}
.is-scrolled .menu-mail img {
    margin: 20px auto auto;
}
}
@media all and (max-width:800px) {
header{
    width: 100%;
    height: 75px;
    z-index: 99;
}
.logo{
    width: 40%;
    padding: 20px 20px 0px;
    z-index: 2;

}
.logo a {
    width: 60%;
}
.logo img {
    width: 100%;
}
.menu-mail{
    position: fixed;
    width: 60px;
    height: 60px;
    top: 0;
    right: 60px;
    background-color: #4c3320;
    text-align: center;
    z-index: 102;
    -webkit-transition: 
        width 0.4s cubic-bezier(0.7, 0, 0.3, 1),
        height 0.4s cubic-bezier(0.7, 0, 0.3, 1),
        right 0.4s cubic-bezier(0.7, 0, 0.3, 1);
    -o-transition: 
        width 0.4s cubic-bezier(0.7, 0, 0.3, 1),
        height 0.4s cubic-bezier(0.7, 0, 0.3, 1),
        right 0.4s cubic-bezier(0.7, 0, 0.3, 1);
    transition: 
        width 0.4s cubic-bezier(0.7, 0, 0.3, 1),
        height 0.4s cubic-bezier(0.7, 0, 0.3, 1),
        right 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}
.menu-mail a {
    margin: 50px auto auto;
    -webkit-transition: margin 0.4s cubic-bezier(0.7, 0, 0.3, 1);
    -o-transition: margin 0.4s cubic-bezier(0.7, 0, 0.3, 1);
    transition: margin 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}
.menu-mail img {
    width: 50%;
    margin: 20px auto auto;
    -webkit-transition: margin 0.4s cubic-bezier(0.7, 0, 0.3, 1);
    -o-transition: margin 0.4s cubic-bezier(0.7, 0, 0.3, 1);
    transition: margin 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}
.is-scrolled .menu-mail{
    width: 40px;
    height: 40px;
    right:40px;
}
.is-scrolled .menu-mail a {
    margin: 13px auto auto;
}
.is-scrolled .menu-mail img {
    margin: 13px auto auto;
}
}