/* ---------------------------------

サイドバー

------------------------------------*/

.sidebar-element-populated {
    padding: 10px;
    width: 28%;
}

/* 検索ボックス */
.sidebar__container,
.sidebar__container .sidebar-widget-container,
aside {
    height: 100%;
    font-family: "Noto Sans JP", sans-serif;
}

.sidebar__container {
    height: 100%;
}

.sidebar-wrapper {
    width: 320px;
    height: 100%;
}

.search-box__wrapper {
    background-color: #BBDBC580;
    padding: 27px;
    margin-bottom: 30px;
}

.search-box__wrapper span {
    color: #297842;
    font-size: 18px;
    text-align: center;
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;
}

.search-box form {
    max-width: 500px;
    width: 95%;
    margin: 30px auto 0;
    display: flex;
}

.search-box form input {
    width: 100%;
    border-radius: 0;
    border: 1px solid #297842;
}

.search-box form button {
    background-color: #297842;
    border: 1px solid #297842;
    border-radius: 0;
    padding: 6px 10px;
}

.search-box form button:hover,
.search-box form button:active {
    background-color: #297842;
    border: 1px solid #297842;
}

.search-box form button img {
    width: 20px;
    position: relative;
    top: 3px;
}

/* 新着記事 */

.sidebar-postlist .postlist__title {
    font-size: 18px;
    color: #297842;
    margin-bottom: 18px;
    display: block;
    position: relative;
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;
    padding-bottom: 5px;
}

.sidebar-postlist .postlist__title::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #DDDDDD;
}

.sidebar-postlist .postlist__title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 140px;
    height: 3px;
    background-color: #297842;
}


.sidebar-postlist ul {
    padding: 0;
}

.sidebar-postlist .post {
    list-style: none;
    margin-bottom: 27px;
    position: relative;
}

.sidebar-postlist .post a {
    display: flex;
    color: #000;
    justify-content: space-between;
    gap: 0 10px;
}

.sidebar-postlist .post a:hover {
    text-decoration: underline;
}

.sidebar-postlist .post a .post-img {
    max-width: 115px;
    width: 95%;
}

.sidebar-postlist .post a .post-img img {
    width: 100%;
    height: auto;
}

.sidebar-postlist .post a .post-text {
    max-width: 195px;
    width: 95%;
    font-size: 14px;
}

.sidebar-postlist .post a .post-text p {
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
}

/* 人気記事ランキングアイコン */
.popular-post .sidebar_ranking-number {
    position: absolute;
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    top: -7px;
    left: -7px;
}

.popular-post .sidebar_ranking-number span {
    display: block;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

.popular-post:nth-child(1) .sidebar_ranking-number {
    background-color: gold;
}

.popular-post:nth-child(2) .sidebar_ranking-number {
    background-color: silver;
}

.popular-post:nth-child(3) .sidebar_ranking-number {
    background-color: #8c4841;
    color: #FFF;
}


/* バナー */
.sidebar-banner {
    position: sticky;
    top: 200px;
}

.sidebar-banner ul {
    padding: 0;
}

.sidebar-banner ul li {
    list-style: none;
    margin-bottom: 18px;
}

.sidebar-banner ul li a {
    display: block;
}

.sidebar-banner ul li a img {
    width: 100%;
    height: auto;
}

@media (max-width:480px) {
    .sidebar-element-populated {
        width: 100%;
        padding: 10px 15px;
    }

    .sidebar-wrapper {
        max-width: 95%;
        width: 100%;
        margin: 30px auto 0;
        height: auto;
    }

    .sidebar-postlist .post a .post-img {
        max-width: 42%;
    }
}