@charset "utf-8";



/**
 *  Foundation
 */

.site-main {
    margin: 5em auto;
}

.post {
    width: 96%;
    max-width: 1024px;
    margin: 3em auto;
    padding-bottom: 3em;
    border-bottom: 1px var(--color-glay) solid;
}



/**
 *  Modules post list
 */

 .entry-title {
    line-height: 1em;
}

.entry-title a {
    color: var(--font-color-primary);
}

.entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 3em;
}

.entry-header .post-categories {
    display: flex;
    justify-content: space-between;
    align-items: center;

    list-style-type: none;
}



.entry-title {
    flex-shrink: 1;
}

.entry-aside {
    flex-shrink: 0;

    display: flex;
    justify-content: space-between;
    align-items: center;
}



.post .date {
    margin: 0 1em;
}

.post .category {
    padding: 0.5em 1em;
    background-color: #fff;

    font-size: var(--font-size-main);
    color: #111;
}



.category.news {
    background-color: #666;
    color: var(--font-color-sub);
}

.category.kotuyosi-kids {
    background-color: #86b3e0;
    color: var(--font-color-sub);
}

.category.kotuyosi {
    background-color: var(--bg-color-primary);
    color: var(--font-color-sub);
}

.category.reuse {
    background-color: #ffe33f;
    color: var(--font-color-sub);
}



.entry-content p {
    margin-top: 0;
}

.entry-meta {
    text-align: right;
}



/**
 *  Modules navigation
 */

.site-main .navigation {
    width: 96%;
    max-width: 1024px;
    margin: 3em auto;
}

.site-main .navigation .nav-links {
    display: flex;
    justify-content: space-between;
    align-items: top;
}

.site-main .navigation .nav-links > div {
    flex-basis: 50%;
    margin: 1%;
}

.nav-links .nav-subtitle {
    width: 100%;
}



/*  iPhone 12 pro Max : iPad portrate ((428px + 768px) / 2)
*/

@media screen and (max-width: 598px) {
    .entry-header {
        flex-wrap: wrap;
    }

    .entry-title {
        width: 100%;
        margin-bottom: 0.5em;
    }

    .entry-aside {
        width: 100%;
        justify-content: flex-end;
        flex-direction: row-reverse;
    }

    .post .category {
        padding: 0.2em 1em;
    }

}