/* --------------------------------------------------
Ver.20170926
Copyright (C) 2014 dev.wintry.jp. All Rights Reserved.
-------------------------------------------------- */
/* --- page design begin --- */
#wrap {
    width: 768px;
    /* background-color: #eeeeee; */
    margin: 0 auto 0 auto;
}

header {
    background-color: #ffffff;
    margin: 10px auto 0 auto;
}

header h1 {
    font-size: x-large;
    font-weight: lighter;
    color: #101010;
    text-align: left;
    padding: 20px 0 20px 20px;
}

section {
    margin: 5px 0 5px 0;
    background-color: #ffffff;
}

section h2 {
    font-size: large;
    color: #a0a0a0;
    text-align: center;
}

section p {
    text-align: center;
    margin: 30px 10px 20px 10px;
}

footer {
    clear: both;
    background-color: #ffffff;
    margin: 45px 0px 0px 0px;
}

footer p {
    text-align: center;
    padding: 20px 0px 20px 0px;
}

header h1,
footer p {
    font-family: "M+ 1p thin sub", "Helvetica Neue", Helvetica, Kalinga, Helvetica, Verdana, Arial, sans-serif;
}

#ns_network {
    /* display: none; */
    width: 100%;
    /* height: 320px; */
    /* border: 1px solid #eeeeee; */
    margin: 40px auto 40px auto;
}

#ns_network img {
    width: 100%;
}

/* --- page design end --- */
/* --- responsive design begin --- */
/*
@media screen and (min-width: 769px) {
}
*/
@media screen and (max-width: 768px) {
    /* tablet */
    #wrap {
        width: 100%;
    }
}

@media screen and (max-width: 640px) {
    /* smartphone */
    #wrap {
        width: 100%;
        min-width: 320px;
    }

    header h1 {
        font-size: 2.0em;
    }

    section {
        margin: 5px 0px 5px 0px;
    }

    section h2 {
        font-size: 0.85em;
    }

    section p {
        font-size: 0.85em;
        margin: 10px 10px 10px 10px;
    }

    footer p {
        font-size: 0.7em;
        font-family: "Helvetica Neue", Helvetica, Kalinga, Helvetica, Verdana, Arial, sans-serif;
    }
    
}
/* --- responsive design end --- */
/* --- animation begin --- */
#sq-wrap {
    width: 40px;
    /* background-color: #eeeeee; */
    margin: 20px auto 0 auto;
}
.animation {
    animation: rotation 2s ease 0s infinite normal none running;
}
.sq {
    display: none;
    width: 20px;
    height: 20px;
    background-color: #6699cc;
    position: relative;
    top: 6px;
    border-left: solid 1px;
    border-bottom: solid 1px;
    border-color: #336699;
}
@keyframes rotation {
    0% {
        transform: translate(200px, 0px) scale(.5);
        opacity: 0.0;
    }
    50% {
        transform: translate(0px, 0px);
        opacity: 1.0;
    }
    100% {
        transform: translate(-200px, 0px) scale(.5);
        opacity: 0.0;
    }
}
/* --- animation end --- */