* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

html {
    font-size: 10px;
}

body {
    /* font-family: 'Source Sans 3, Helvetica, Arial, sans-serif'; */
    font-family: Source Sans Pro, Helvetica, Arial, sans-serif;
    font-size: 1.6rem;
    letter-spacing: .3px;
    line-height: 1.6;
    color: #4a4a4a;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

section {
    width: 900px;
    margin: 32px auto 0;
    padding-bottom: 32px;
    border-bottom: 1px solid #8c8b8b;
}
section:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
section.with-border-top {
    padding-top: 16px;
    border-top: 1px solid #8c8b8b;
}

a {
    color: inherit;
    text-decoration: none;
}

a:visited {
    color: inherit;
}
a.underline {
    text-decoration: underline;
}

.slidein-from-top {
    opacity: 0;
    /* animation-name, iteration-count, duration, delay, timing-function, fill-mode */
    animation: slidein-from-top 1 .3s 0s ease forwards;
}
.slidein-from-bottom {
    opacity: 0;
    /* animation-name, iteration-count, duration, delay, timing-function, fill-mode */
    animation: slidein-from-bottom 1 .4s .2s ease forwards;
}

@keyframes slidein-from-top {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes slidein-from-bottom {
    0% {
        opacity: 0;
        transform: translateY(150px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.sp-area {
    display: none;
}

@media screen and (max-width: 640px) {
    .pc-area {
        display: none;
    }
    .sp-area {
        display: block;
    }

    section {
        width: 100%;
    }
}