@charset "utf-8";

.archive-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px 12px;
}

.archive-list::before {
    order: 1;
    width: calc(100% / 4 - 12px);
    content: "";
}

.archive-list::after {
    width: calc(100% / 4 - 12px);
    content: "";
}

.archive-list article {
    width: calc(100% / 4 - 12px);
    overflow: hidden;
    position: relative;
}

.archive-list article a {
    color: #000;
}

.archive-list article .card-box {
    border: 1px solid #ddd;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    position: relative;
}

.archive-list article .card-box .detail {
    margin: 0 5px;
    padding: 0 5%;
    width: 100%;
    height: 0;
    min-height: 80px;
    display: grid;
    grid-template-rows: 1.5fr 0.5fr 0.5fr;
    align-items: flex-start;
}

.archive-list article .card-box .detail .title {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    font-size: 16px;
    letter-spacing: 1px;
    margin: 4px 0;
    width: 100%;
    line-height: 1.4;
}

@media screen and (max-width: 60em) {
    .archive-list article {
        width: calc(100% / 3 - 12px);
    }

    .archive-list::before {
        display: none;
    }

    .archive-list article::after {
        width: calc(100% / 3 - 12px);
    }
}

@media screen and (max-width: 40em) {
    .archive-list article {
        width: calc(100% / 2 - 6px);
    }

    .archive-list::before,
    .archive-list::after {
        display: none;
    }
}

/*  Shortcode  */
/* base */
.recently_post_type--list {
    padding: 0;
    list-style: none;
}

.recently_post_type--list .recently_post_type--thumbnail img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.recently_post_type--wrap .more__button {
    margin: 2rem auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.recently_post_type--wrap .more__button::after {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    color: currentColor;
    content: "";
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.1643 12.0001L12.9572 5.79297L11.543 7.20718L16.3359 12.0001L11.543 16.793L12.9572 18.2072L19.1643 12.0001ZM13.5144 12.0001L7.30728 5.79297L5.89307 7.20718L10.686 12.0001L5.89307 16.793L7.30728 18.2072L13.5144 12.0001Z'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.1643 12.0001L12.9572 5.79297L11.543 7.20718L16.3359 12.0001L11.543 16.793L12.9572 18.2072L19.1643 12.0001ZM13.5144 12.0001L7.30728 5.79297L5.89307 7.20718L10.686 12.0001L5.89307 16.793L7.30728 18.2072L13.5144 12.0001Z'%3E%3C/path%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: cover;
    mask-size: cover;
}

/* list style */
.recently_post_type--list.layout-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.recently_post_type--list.layout-list .recently_post_type--item {
    margin: 0;
    padding: 0 1.5rem 1rem;
    border-bottom: 1px solid #000;
}

.recently_post_type--list.layout-list .recently_post_type--article a {
    color: #000;
    display: flex;
    gap: 1rem;
    text-decoration: none;
}

.recently_post_type--list.layout-list .recently_post_type--article a:hover {
    filter: opacity(0.8);
}

.recently_post_type--list.layout-list .recently_post_type--thumbnail {
    flex: 1 0 20%;
}

.recently_post_type--list.layout-list .recently_post_type--box {
    flex: 1 0 70%;
}

.recently_post_type--list.layout-list .recently_post_type--title {
    padding: 0 0 0 0.5rem;
    display: inline-block;
}

.recently_post_type--list.layout-list .recently_post_type--categories {
    display: flex;
    gap: 0.5rem;
}

.recently_post_type--list.layout-list .recently_post_type--category {
    display: inline-flex;
    align-items: center;
}

.recently_post_type--list.layout-list .recently_post_type--category::before {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    color: #333;
    content: "";
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5V19H20V7H11.5858L9.58579 5H4ZM12.4142 5H21C21.5523 5 22 5.44772 22 6V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H10.4142L12.4142 5Z'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5V19H20V7H11.5858L9.58579 5H4ZM12.4142 5H21C21.5523 5 22 5.44772 22 6V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H10.4142L12.4142 5Z'%3E%3C/path%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: cover;
    mask-size: cover;
}

.recently_post_type--list.layout-list .recently_post_type--tags {
    display: flex;
    gap: 0.5rem;
}

.recently_post_type--list.layout-list .recently_post_type--tag {
    display: inline-flex;
    align-items: center;
}

.recently_post_type--list.layout-list .recently_post_type--tag::before {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    color: #333;
    content: "";
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.9042 2.1001L20.8037 3.51431L22.2179 13.4138L13.0255 22.6062C12.635 22.9967 12.0019 22.9967 11.6113 22.6062L1.71184 12.7067C1.32131 12.3162 1.32131 11.683 1.71184 11.2925L10.9042 2.1001ZM11.6113 4.22142L3.83316 11.9996L12.3184 20.4849L20.0966 12.7067L19.036 5.28208L11.6113 4.22142ZM13.7327 10.5854C12.9516 9.80433 12.9516 8.538 13.7327 7.75695C14.5137 6.9759 15.78 6.9759 16.5611 7.75695C17.3421 8.538 17.3421 9.80433 16.5611 10.5854C15.78 11.3664 14.5137 11.3664 13.7327 10.5854Z'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.9042 2.1001L20.8037 3.51431L22.2179 13.4138L13.0255 22.6062C12.635 22.9967 12.0019 22.9967 11.6113 22.6062L1.71184 12.7067C1.32131 12.3162 1.32131 11.683 1.71184 11.2925L10.9042 2.1001ZM11.6113 4.22142L3.83316 11.9996L12.3184 20.4849L20.0966 12.7067L19.036 5.28208L11.6113 4.22142ZM13.7327 10.5854C12.9516 9.80433 12.9516 8.538 13.7327 7.75695C14.5137 6.9759 15.78 6.9759 16.5611 7.75695C17.3421 8.538 17.3421 9.80433 16.5611 10.5854C15.78 11.3664 14.5137 11.3664 13.7327 10.5854Z'%3E%3C/path%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: cover;
    mask-size: cover;
}

/* grid style */
.recently_post_type--list.layout-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 1.5rem;
}

.recently_post_type--list.layout-grid .recently_post_type--item {
    margin: 0;
}

.recently_post_type--list.layout-grid a {
    box-shadow: 3px 3px 6px 0 #0003;
    color: #000;
    display: flex;
    flex-flow: wrap;
    gap: 0.5rem;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.recently_post_type--list.layout-grid a:hover {
    box-shadow: 3px 3px 6px 0 #0006;
}

.recently_post_type--list.layout-grid .recently_post_type--thumbnail {
    flex: 1 0 100%;
}

.recently_post_type--list.layout-grid .recently_post_type--box {
    flex: 1 0 100%;
    padding: 0 1rem 1rem;
}

.recently_post_type--list.layout-grid .recently_post_type--category {
    display: inline-flex;
    align-items: center;
}

.recently_post_type--list.layout-grid .recently_post_type--category::before {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    color: #333;
    content: "";
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5V19H20V7H11.5858L9.58579 5H4ZM12.4142 5H21C21.5523 5 22 5.44772 22 6V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H10.4142L12.4142 5Z'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5V19H20V7H11.5858L9.58579 5H4ZM12.4142 5H21C21.5523 5 22 5.44772 22 6V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H10.4142L12.4142 5Z'%3E%3C/path%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: cover;
    mask-size: cover;
}

.recently_post_type--list.layout-grid .recently_post_type--tags {
    display: flex;
    gap: 0.5rem;
}

.recently_post_type--list.layout-grid .recently_post_type--tag {
    display: inline-flex;
    align-items: center;
}

.recently_post_type--list.layout-grid .recently_post_type--tag::before {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    color: #333;
    content: "";
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.9042 2.1001L20.8037 3.51431L22.2179 13.4138L13.0255 22.6062C12.635 22.9967 12.0019 22.9967 11.6113 22.6062L1.71184 12.7067C1.32131 12.3162 1.32131 11.683 1.71184 11.2925L10.9042 2.1001ZM11.6113 4.22142L3.83316 11.9996L12.3184 20.4849L20.0966 12.7067L19.036 5.28208L11.6113 4.22142ZM13.7327 10.5854C12.9516 9.80433 12.9516 8.538 13.7327 7.75695C14.5137 6.9759 15.78 6.9759 16.5611 7.75695C17.3421 8.538 17.3421 9.80433 16.5611 10.5854C15.78 11.3664 14.5137 11.3664 13.7327 10.5854Z'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.9042 2.1001L20.8037 3.51431L22.2179 13.4138L13.0255 22.6062C12.635 22.9967 12.0019 22.9967 11.6113 22.6062L1.71184 12.7067C1.32131 12.3162 1.32131 11.683 1.71184 11.2925L10.9042 2.1001ZM11.6113 4.22142L3.83316 11.9996L12.3184 20.4849L20.0966 12.7067L19.036 5.28208L11.6113 4.22142ZM13.7327 10.5854C12.9516 9.80433 12.9516 8.538 13.7327 7.75695C14.5137 6.9759 15.78 6.9759 16.5611 7.75695C17.3421 8.538 17.3421 9.80433 16.5611 10.5854C15.78 11.3664 14.5137 11.3664 13.7327 10.5854Z'%3E%3C/path%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: cover;
    mask-size: cover;
}

@media screen and (max-width: 60em) {
    .recently_post_type--list.layout-list .recently_post_type--item {
        padding: 0 0.5rem 1rem;
    }

    .recently_post_type--list.layout-grid {
        grid-template-columns: 1fr;
    }

    .recently_post_type--list.layout-grid .recently_post_type--box {
        padding: 0 0.5rem 1rem;
    }
}

/*  sidebar  */
/* archive-list */
#sidebar .archive-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px 12px;
}

#sidebar .archive-list::before,
#sidebar .archive-list::after {
    display: none;
}

#sidebar .archive-list article {
    width: 100%;
    overflow: hidden;
    position: relative;
}

#sidebar .archive-list article a {
    text-decoration: none;
}

#sidebar .archive-list article img {
    vertical-align: middle;
}

#sidebar .archive-list article .card-box {
    border: 1px solid #ddd;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    position: relative;
}

#sidebar .archive-list article .card-box .categories {
    padding: 4px 8px;
    background: #f8a706;
    color: #fff;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
}

#sidebar .archive-list article .card-box .categories .category {
    color: currentColor;
    display: flex;
    justify-content: center;
    align-items: center;
}

#sidebar .archive-list article .card-box .categories .category::before {
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5V19H20V7H11.5858L9.58579 5H4ZM12.4142 5H21C21.5523 5 22 5.44772 22 6V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H10.4142L12.4142 5Z'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5V19H20V7H11.5858L9.58579 5H4ZM12.4142 5H21C21.5523 5 22 5.44772 22 6V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H10.4142L12.4142 5Z'%3E%3C/path%3E%3C/svg%3E");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    content: "";
}

#sidebar .archive-list article .card-box .detail {
    margin: 0 5px;
    padding: 5px 5%;
    width: 100%;
    height: 0;
    min-height: 80px;
    display: grid;
    grid-template-rows: 1fr 0.5fr;
    align-items: flex-start;
}

#sidebar .archive-list article .card-box .detail .title {
    margin: 0;
    width: 100%;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 1.4;
}

#sidebar .archive-list article a:has(.list-box) {
    color: #0d77d9;
    display: inline-block;
}

#sidebar .archive-list article .list-box {
    display: flex;
    flex-flow: wrap-reverse;
}

#sidebar .archive-list article .list-box .categories .category {
    color: currentColor;
    display: flex;
    justify-content: center;
    align-items: center;
}

#sidebar .archive-list article .list-box .categories .category::before {
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5V19H20V7H11.5858L9.58579 5H4ZM12.4142 5H21C21.5523 5 22 5.44772 22 6V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H10.4142L12.4142 5Z'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5V19H20V7H11.5858L9.58579 5H4ZM12.4142 5H21C21.5523 5 22 5.44772 22 6V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H10.4142L12.4142 5Z'%3E%3C/path%3E%3C/svg%3E");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    content: "";
}

#sidebar .archive-list article .list-box .img_wrap {
    display: none;
}

#sidebar .archive-list article .list-box .detail {
    width: 100%;
    display: flex;
    flex-flow: row-reverse;
    justify-content: flex-end;
    gap: 8px;
}

@media screen and (max-width: 60em) {
    #sidebar .archive-list article:has(.card-box) {
        width: calc(100% / 2 - 12px);
    }
}

@media screen and (max-width: 40em) {
    #sidebar .archive-list article:has(.card-box) {
        width: 100%;
    }
}

/* category list */
#sidebar .category-list {
    padding: 0;
    list-style: none;
}

#sidebar .category-list a {
    padding: 8px 4px;
    border-bottom: 1px solid #aaa;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    text-decoration: none;
}

#sidebar .category-list li:first-of-type a {
    border-top: 1px solid #aaa;
}

#sidebar .category-list a::after {
    width: 8px;
    height: 8px;
    border-top: solid 1px #333;
    border-right: solid 1px #333;
    display: inline-block;
    transform: rotate(45deg);
    content: "";
}