body {
    margin: 0;
    background-color: rgb(245, 245, 245);
    margin-top: 10px;
    margin-bottom: 10px;
}

.header {
    padding-bottom: 20px;
}

.content {
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 50px;
    padding-right: 50px;
    margin-left: 12%;
    margin-right: 12%;
}

.copyright p {
    color: rgb(59, 59, 59);
    font-size: small;
}

/* ブログ記事へのリンク */

.blog-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: 100vw;
}

.blog-link-element {
    margin: 2px;
    width: 250px;
    height: 290px;
}

.blog-link-element:hover {
    opacity: 0.6;
    transition: 0.3s;
}

.blog-link-element-image {
    width: 246px;
    height: 150px;
    margin-top: 2px;
    margin-left: 2px;
    margin-right: 2px;
    border-radius: 5px;
    object-fit: cover;
    object-position: 25% 35%;
}

.blog-link-element-title, p.blog-link-element-context, .blog-link-element-datetime {
    margin-left: 4px;
    margin-right: 4px;
}

p.blog-link-element-title {
    color: rgb(32, 32, 32);
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 0px;
}

p.blog-link-element-datetime {
    color: rgb(59, 59, 59);
    font-size: x-small;
    margin-top: 0px;
    margin-bottom: 0px;
}

p.blog-link-element-context {
    color: rgb(59, 59, 59);
    font-size: small;
    margin-top: 1px;
    margin-bottom: 1px;
}

/* ブログ記事のヘッダ */

/* 記事名 */
.post-header h1 {
    margin-bottom: 1px;
}

/* 記事の日付 */
.post-header p {
    margin-top: 1px;
    color: rgb(59, 59, 59);
}

.post-footer {
    margin-top: 30px;
}

/* 記事で用いる画像 */
.content-image {
    max-width: 100%;
}

/* smart phone or tablet? */
@media screen and (max-width: 620px) {
    .header {
        padding-bottom: 20px;
    }
    
    .content {
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 5px;
        padding-right: 5px;
        margin-left: 0;
        margin-right: 0;
        min-width: 0px;
    }

    .content {
        padding-top: 30px;
        padding-bottom: 30px;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 5%;
        margin-right: 5%;
    }

    .blog-link {
        display: flex;
        flex-wrap: wrap;
        max-width: 480px;
    }

    .blog-link-element {
        margin: 2px;
        width: 80vw;
        height: 70vw;
        min-height: 280px;
    }
    
    .blog-link-element:hover {
        opacity: 1;
    }
    
    .blog-link-element-image {
        width: 80vw;
        height: 45vw;
        margin-top: 2px;
        margin-left: 2px;
        margin-right: 2px;
        border-radius: 5px;
        object-fit: cover;
        object-position: 25% 35%;
    }
}