.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:50px;
    height:50px;
    position:fixed;
    top:60px;
    right:60px;
    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;
    touch-action:manipulation;
}

.hamburger__icon {
    position:relative;
    margin-top:7px;
    margin-bottom:7px;
}

.hamburger__icon,.hamburger__icon:after,.hamburger__icon:before {
    display:block;
    width:35px;
    height:2px;
    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:-13px;
}

.hamburger__icon:after {
    top:13px;
}

.hamburger.active .hamburger__icon {
    background-color:transparent;
}

.hamburger.active .hamburger__icon:after,.hamburger.active .hamburger__icon:before {
    background-color:#fff !important;
}

.hamburger.active .hamburger__icon:before {
    -moz-transform:translateY(13px)rotate(45deg);
    -ms-transform:translateY(13px)rotate(45deg);
    -webkit-transform:translateY(13px)rotate(45deg);
    transform:translateY(13px)rotate(45deg);
}

.hamburger.active .hamburger__icon:after {
    -moz-transform:translateY(-13px)rotate(-45deg);
    -ms-transform:translateY(-13px)rotate(-45deg);
    -webkit-transform:translateY(-13px)rotate(-45deg);
    transform:translateY(-13px)rotate(-45deg);
}

.fat-nav {
    top:0;
    left:0;
    z-index:9999;
    position:fixed;
    display:none;
    width:100%;
    height:100%;
    background:rgba(13,50,70,.9); /* 鉄紺 */
    -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%;
    display:table;
    table-layout:fixed;
}

.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:0;
}

.fat-nav li {
    list-style-type:none;
    text-align:center;
    padding:20px;
    font-size: 22px;
}

.fat-nav li,.fat-nav li a {
    color:#fff;
}

.fat-nav li a {
    text-decoration:none;
}

/* ========================
 Media Queries
======================== */
@media screen and (max-width:600px) {
.hamburger {
    display:block;
    width:50px;
    height:50px;
    position:fixed;
    top:60px;
    right:30px;
}
.fat-nav li {
    font-size: 18px;
}
}