@charset "UTF-8";
@media only screen and (max-width: 767px) {
    .contents {
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        -o-flex-direction: column;
        flex-direction: column;
    }
    .contents main {
        width: 100%;
        background-color: #f8f8f8;
        padding: 20px 0px;
    }
    .about {
        margin: 20px;
    }
    .contents p {
        font-size: 14px;
        line-height: 30px;
        letter-spacing: -0.01em;
        margin: 10px 0px;
    }
    .columnist {
    padding: 10px 20px;
    background-color: #e2e2e2;
    border-top: 5px solid #818181;
    color: #818181;
    margin: 0;
}
    #top-head.fixed .logo, #top-head .logo {
    position: absolute;
    left: 5px;
    top: 0px;
    color: #333;
    font-size: 26px;
    width: 100%;
}
    header a .head_logo {
    height: 20px;
    width: 90px;
    padding-top: 5px;
}
    .foot_recommendation .other_row {
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
}
    .foot_recommendation .column_contents {
    width: 100%;
}
    .contents aside {
    width: 100%;
        margin-top: 20px;
}
        .top_heading {
    padding-top: 56px;
}
    .article {
    margin: 0px;
}
}