@charset "UTF-8";

.page_ttl {
    display: none;
    color: #fff;
    font-size: 16rem;
    margin-bottom: 40rem;
    text-align: center;
}

.page_ttl span {
    background: #3E201B;
    box-shadow: 3rem 3rem rgb(0 0 0 / 30%);
    padding: 8rem;
}

.page_ttl span i {
    margin-right: 3rem;
}

/*.breadcrumb {
display: none;
margin-bottom: 30rem;
}

.breadcrumb ul {
display: flex;
flex-wrap: wrap;
font-size: 16rem;
}

.breadcrumb ul li a::after {
content: "＞";
padding: 0 10rem;
}

.breadcrumb ul li:last-child {
font-weight: bold;
}

.breadcrumb ul li:last-child a::after {
display: none;
}*/

@media screen and (max-width: 767px) {

    .page_ttl {
        display: block;
        order: 1;
    }

    /*.breadcrumb {
    display: block;
    order: 1;
}*/

}


/*-------------------------------------------
container
-------------------------------------------*/
#container {
    display: flex;
    justify-content: space-between;
    margin-top: 60rem;
    margin-bottom: 100rem;
}

main {
    width: 73%;
}

main article {
    margin-bottom: 30rem;
}

#page_archive-blog main article {
    display: flex;
    justify-content: space-between;
    padding: 20rem;
}

#page_single-blog main article {
    padding: 50rem 50rem 60rem 50rem;
}

/*
main article .pic img {
    height: 200rem;
    width: 300rem;
    margin-right: 20rem;
}

main article .desc {
    width: calc(100% - 320rem);
}
*/

#page_archive-blog main article .pic {
    width: 37%;
}

#page_archive-blog main article .desc {
    width: 60%;
}

main .ttl {
    font-size: 16rem;
    margin: 0 0 15rem 0;
}

main .meta {
    display: flex;
    justify-content: flex-start;
}

main .text p {
    /*font-size: 16rem;*/
    font-size: 14rem;
    /*margin: 0 0 1.5em;*/
    margin: 20rem 0 0;
}

#page_archive-blog main .meta {
    margin-bottom: 10rem;
}

#page_single-blog main .meta {
    /*margin-bottom: 30rem;*/
    margin-bottom: 20rem;
}

#page_archive-blog main .text {
    margin-bottom: 10rem;
}

main .meta li {
    color: #9fa6b4;
    font-size: 14rem;
    margin-right: 20rem;
}

/*----- WPカスタム -----*/
main .wp-block-image {
    /*margin: 30rem 0;*/
    margin: 20rem 0 0;
}

main .wp-block-image figcaption {
    color: #9fa6b4;
    font-size: 14rem;
    margin-top: 20rem;
    text-align: center;
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 767px) {

    /*-------------------------------------------
    container
    -------------------------------------------*/
    
    #container,
    #page_archive-blog main article {
        flex-direction: column;
    }
    
    #container {
        margin-bottom: 50rem;
    }
    
    #page_archive-blog main article .pic,
    #page_archive-blog main article .desc {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    main article .pic {
        margin-bottom: 20rem;
    }
    
    #page_single-blog main article {
        /*padding: 30rem 30rem 60rem 30rem;*/
        padding: 30rem 30rem 40rem 30rem;
    }
    
    #page_single-blog main .meta {
        margin-bottom: 10rem;
    }

    main {
        width: 100%;
        margin-bottom: 50rem;
        order: 2;
    }
    
    /*----- WPカスタム -----*/
    
    .wp-block-image img {
        height: auto;
    }

}



/*-------------------------------------------
aside
-------------------------------------------*/
#sidebar {
    width: 22%;
}

#sidebar .side-title {
    font-size: 16rem;
    font-weight: bold;
    margin-bottom: 30rem;
    
    padding: 5rem 10rem;
    border-left: 5rem solid #522b26;
    background: radial-gradient(#ccc 30%, transparent 0);
    background-size: 4rem 4rem;
    text-align: left;
}

.author {
    margin-bottom: 60rem;
}

.author .pic {
    margin-bottom: 30rem;
    max-width: 250rem;
    margin-left: auto;
    margin-right: auto;
}

.author .profile {
    font-size: 12rem;
    text-align: center;
}

.archive {
    margin-bottom: 60rem;
}

.archive li {
    /*font-size: 16rem;*/
    font-size: 14rem;
    text-align: left;
}

.archive li + li {
    margin-top: 10rem;
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 767px) {

    /*-------------------------------------------
    aside
    -------------------------------------------*/
    #sidebar {
        width: 100%;
        order: 3;
    }
}




/*-------------------------------------------
前ページと次ページのリンク
-------------------------------------------*/
.post-link {
    /*width: 300rem;*/
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}
/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 767px) {
    .post-link {
        width: 100%;
    }
}