
.fat-nav,.hamburger__icon,
.hamburger__icon:after,
.hamburger__icon:before{
    -moz-transition-duration:.4s;
    -o-transition-duration:.4s;
    -webkit-transition-duration:.4s
}
.hamburger{
    display:block;
    width: 70px;
    height: 50px;
    position:absolute;
    top:0;
    right:0;
    z-index:10000;
    padding: 12px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
    -ms-touch-action:manipulation;
    ouch-action:manipulation;
}
.hamburger__icon{
    position:relative;
    margin-top:15px;
    margin-bottom:7px
}
.hamburger__icon,
.hamburger__icon:after,
.hamburger__icon:before{
    display:block;
    width:40px;
    height:3px;
    background-color:#fff;
    -moz-transition-property:background-color,-moz-transform;
    o-transition-property:background-color,-o-transform;
    -webkit-transition-property:background-color,-webkit-transform;
    transition-property:background-color,transform;
    transition-duration:.4s
}
.hamburger__icon:after,
.hamburger__icon:before{
    position:absolute;
    content:""
}
.hamburger__icon:before{top:-10px}
.hamburger__icon:after{top:10px}
.hamburger.active .hamburger__icon{background-color:transparent}
.hamburger.active .hamburger__icon:after,
.hamburger.active .hamburger__icon:before{background-color:#fff}
.hamburger.active .hamburger__icon:before{
    -moz-transform:translateY(10px)rotate(45deg);
    -ms-transform:translateY(10px)rotate(45deg);
    -webkit-transform:translateY(10px)rotate(45deg);
    transform:translateY(10px)rotate(45deg)
}
.hamburger.active .hamburger__icon:after{
    -moz-transform:translateY(-10px)rotate(-45deg);
    -ms-transform:translateY(-10px)rotate(-45deg);
    -webkit-transform:translateY(-10px)rotate(-45deg);
    transform:translateY(-10px)rotate(-45deg)
}
.fat-nav{
    top:0;
    bottom:0;
    z-index:9999;
    position:fixed;
    display:none;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.8);
    -moz-transform:scale(1.4);
    -ms-transform:scale(1.4);
    -webkit-transform:scale(1.4);
    transform:scale(1.4);
    -moz-transition-property:-moz-transform;
    -o-transition-property:-o-transform;
    -webkit-transition-property:-webkit-transform;
    transition-property:transform;
    transition-duration:.4s;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch
}
.fat-nav__wrapper{
    width:100%;
    height:100%;
}
.fat-nav__wrapper .box{
    display:table;
    table-layout:fixed;
    position: fixed;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
    width: 800px;
    margin: 0 auto;
}
.fat-nav__wrapper .box img{
    display:inline-block;
    vertical-align:middle;
    padding-top:200px;
}
.fat-nav.active{
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -webkit-transform:scale(1);
    transform:scale(1)
}
.fat-nav ul{
    display:table-cell;
    vertical-align:middle;
    margin:0;
    padding-left:50px;
    border-left:1px solid #fff;
}
.fat-nav li{
    list-style-type:none;
    text-align:left;
    padding-bottom:45px;
    font-size:26px;
    font-family: "a-otf-ryumin-pr6n",serif;
}
.fat-nav li:first-child{
    padding-top:17px;
}
.fat-nav li:last-child {
    padding-bottom:17px;
}
.fat-nav li,.fat-nav li a{color:#fff}
.fat-nav li a{text-decoration:none}
.fat-nav li a:hover{color:#999;}

@media (max-width: 750px) {
.hamburger{
    width:10%;
    height:auto;
    z-index: 99999;
}
.hamburger__icon{
    /*position:absolute;*/
    position:fixed;
    top:50px;
    right:25px;
}
.hamburger__icon,
.hamburger__icon:after,
.hamburger__icon:before{
    width:70px;
    height:5px;
    background-color:#fff;
}

.hamburger__icon:before{top:-18px}
.hamburger__icon:after{top:18px}
.hamburger.active .hamburger__icon:before{
    -moz-transform:translateY(18px)rotate(45deg);
    -ms-transform:translateY(18px)rotate(45deg);
    -webkit-transform:translateY(18px)rotate(45deg);
    transform:translateY(18px)rotate(45deg)
}
.hamburger.active .hamburger__icon:after{
    -moz-transform:translateY(-18px)rotate(-45deg);
    -ms-transform:translateY(-18px)rotate(-45deg);
    -webkit-transform:translateY(-18px)rotate(-45deg);
    transform:translateY(-18px)rotate(-45deg)
}
.fat-nav__wrapper .box{
    top: 20%;
    left:0;
    transform: none;
    width: 100%;
    margin: 0 auto;
}
.fat-nav__wrapper .box img{
    padding-top: 300px;/*25vh;*/
}
.fat-nav ul{
    padding-left:0px;
}
.fat-nav li{
    text-align:center;
    padding-bottom:70px;
    font-size:3.2em;
}
} 