/*main
---------------------------------------------------------------------------*/

    html {
        background: url(../img/home/bg-line.png);
        height: 100%;
        min-height: 100%;
    }

    body {
        background: url(../img/home/bg.png) no-repeat top left;
        background-size: contain;
        height: 100%;
        min-height: 100%;
        overflow: hidden;
    }

    article {
        height: 100%;
    }

    h1 {
        position: absolute;
        bottom: 3%;
        left: 49%;
        z-index: 100;
    }

    #home #header {
        position: static;
        padding: 0;
        box-shadow: none;
        background: transparent;
    }

    @media (max-width: 600px) {
        #home #header {
            position: fixed;
        }
    }
    header h1{
        margin-top: 15px;
    }
    #pc-menu {
        position: absolute;
        top: 10%;
        left: 5%;
        z-index: 100;
    }

    #pc-menu h2 {
        margin: 0 0 0.2em;
    }

    #pc-menu ul {
        margin: 0 0 0 1.8em;
    }

    #pc-menu li {
        margin: 0 0 1em;
        width: 100%;
        float: none;
    }

    #pc-menu li:first-child {
        font-size: 140%;
    }

    #pc-menu li:nth-child(2) {
        margin: 0 0 1em 2em;
    }

    #pc-menu li:nth-child(3) {
        margin: 0 0 1em 4em;
    }

    #pc-menu li:nth-child(4) {
        margin: 0 0 1em 6em;
    }

    #pc-menu a {
        display: block;
        line-height: 120%;
        font-weight: bold;
        color: rgba(255, 255, 255, 0.7);
        transition: all 0.6s linear;
    }
    #pc-menu li a img{
        float: left;
        margin-bottom: 0;
        padding: 4px 10px 0 0;
    }
    #pc-menu a:hover {
        color: rgba(255, 255, 255, 1);
    }

    #pc-menu span {
        display: block;
        font-weight: normal;
        font-size: 70%;
    }

    #catch {
        position: absolute;
        top: 14.3%;
        left: 57%;
        padding: 4% 0 0;
        z-index: 100;
    }

    #catch h2 {
        font-size: 200%;
        line-height: 170%;
    }

    #catch h2 span {
        display: block;
        font-size: 190%;
        color: #2ea7e0;
    }

    #catch figure {
        position: absolute;
        top: 0%;
        left: 0%;
        z-index: 100;
        animation: fuwafuwa 3s ease infinite;
    }

    #links ul {
        position: absolute;
        top: 40%;
        right: 0;
        z-index: 100;
    }

    #links li {
        margin: 0 0 1em;
        text-align: right;
    }
    .mm-divider h3{
        font-size: 20px;
        margin: 10px;
    }
    .mm-divider img{
        width: 33.3334%;
        float: left;
    }
    .mm-menu.mm-theme-dark .mm-navbar a, .mm-menu.mm-theme-dark .mm-navbar > *, .mm-menu.mm-theme-dark em.mm-counter{
        color: #FFF!important;
    }
    .mm-menu.mm-theme-white .mm-navbar a, .mm-menu.mm-theme-white .mm-navbar > *, .mm-menu.mm-theme-white em.mm-counter{
        color: #333!important;
    }

/* max-width: 1400px

---------------------------------------------------------------------------------*/

@media (max-width: 1400px) {
    #pc-menu li:first-child {
        font-size: 110%;
    }
    #pc-menu {
        top: 5%;
        left: 0;
    }
    #pc-menu span {
        font-size: 90%;
    }
    #header ul {
        font-size: 90%;
    }
    #catch {
        left: 50%;
        top: 11%;
    }
    #catch h2 {
        font-size: 170%;
    }
    #catch figure {
        width: 75px;
    }
    h1{
        left: 54%;
    }

    h1 img{
        width: 150px;
    }

    #pc-menu h2 img {
        width:65%;
    }

}


/* max-width: 1024px

---------------------------------------------------------------------------------*/

@media (max-width: 1024px) {
    h1 {
        left: 65%;
    }
    #pc-menu {
        top: 7%;
        left: 2%;
    }
    #pc-menu li:nth-child(2) {
        margin: 0 0 1em 2em;
    }
    #pc-menu li:nth-child(3) {
        margin: 0 0 1em 4em;
    }
    #pc-menu li:nth-child(4) {
        margin: 0 0 1em 6em;
    }
    #catch {
        top: 5%;
    }
    #catch figure {
        width: 65px;
    }
}

@media (max-width: 1000px) and (min-width: 700px) {
    #catch {
        left: 61%;
        padding-top: 6%;
    }
    #catch h2 {
        font-size: 150%;
    }
    #catch h2 span {
        font-size: 120%;
    }
}


/* max-width: 640px

---------------------------------------------------------------------------------*/

@media (max-width: 640px) {
    html {
        height: auto;
    }
    body {
        background: none;
        height: auto;
        overflow: visible;
    }
    article {
        height: auto;
    }
    h1 {
        position: static;
    }
    #pc-menu {
        position: static;
    }
    #catch {
        position: static;
        padding: 24% 0 0;
        z-index: 100;
        text-align: center;
    }
    #catch h2 {
        font-size: 160%;
        line-height: 170%;
    }
    #catch h2 span {
        display: block;
        font-size: 130%;
        color: #2ea7e0;
    }
    #catch figure {
        width: 100%;
        position: absolute;
        top: 0%;
        left: 0%;
        z-index: 100;
        animation: fuwafuwa 3s ease infinite;
    }
    #catch figure img {
        max-height: 49px;
    }
    #links {
        position: relative;
        min-height: 150px;
    }
    #links ul {
        position: absolute;
        top: 40%;
        right: 0;
        z-index: 100;
    }
    #links li {
        margin: 0 0 1em;
        text-align: right;
    }
}