.page-blog{
    /*
    position: relative;
    padding-top: min(calc(115 / 1280 * 100vw), 8.41rem);
    */
    /* padding-bottom: min(calc(115 / 1280 * 100vw), 8.41rem); */
}
.page-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: min(calc(1280 / 1280 * 100vw), 93.6rem);
    /*
    height: min(calc(2628 / 1280 * 100vw), 192.1725rem);
    */
    height: 100%;
    min-height: 100vh;
    background-image: url(../images/bg-lower.webp);
    width: 100%;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    z-index: -99;
}
.page-bg__earth {
    position: absolute;
    width: min( calc(644/1280*100vw), 47.1rem);
    top: min( calc(180/1280*100vw), 11.25rem);
    left: 0;
}
.page-bg__sun {
    position: absolute;
    top: 0;
    right: 0;
    width: min( calc(344/1280*100vw), 25.155rem);
    z-index: 1;
}
.page-bg__sun .circle {
    position: absolute;
    top: 0;
    right: 0;
}
.page-bg__sun .sun {
    position: absolute;
    top: 0;
    right: 0;
}


.blog-wrap{
    background: #fff;
    display: flex;
    gap: 100px 50px;
    padding: 80px 50px;
    border-radius: 0 0 min( calc(40/1280*100vw), 2.925rem) min( calc(40/1280*100vw), 2.925rem);
}
.blog-wrap__main{
    width: calc( 100% - 310px);
}
.blog-wrap__side{
    width: 260px;
}
.blog-wrap__main-list{
    display: flex;
    flex-wrap: wrap;
    gap: min( calc(40/1280*100vw), 2.925rem) min( calc(36/1280*100vw), 2.25rem);
}
.blog-wrap__main-list > li{
    width: calc( (100% - 72px ) / 3);
    padding: min( calc(40/1280*100vw), 2.925rem);
    background: #FFFDEB;
    border-radius: min( calc(40/1280*100vw), 2.925rem);
}
.blog-wrap__main-list > li > a{
    display: block;
    width: 100%;
}
.blog-wrap__achieve-thumb{
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: clip;
}
.blog-wrap__achieve-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-wrap__achieve-thumb.no_image{
    background: #e5f7ff;
    position: relative;
}
.blog-wrap__achieve-thumb.no_image p{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.blog-wrap__achieve-thumb.no_image img{
    width: 73%;
    height: auto;
    aspect-ratio: 120 / 24;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    object-fit: contain;
}
.blog-wrap__achieve-title{
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -0.01em;
    color: var(--color-accent);
    margin: 17px 0 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 何行目で省略するか */
    overflow: hidden;
}
.blog-wrap__main-list .tag-list{
    display: flex;
    flex-wrap: wrap;
    gap: 0.2em 0.5em;
    color: var(--color-accent);
    margin: 1em 0 0;
}

.blog-wrap__side > * + *{
    margin: 2em 0 0;
}
.blog-wrap__side h4{
    position: relative;
    font-size: 120%;
    font-weight: bold;
}
.blog-wrap__side h4::before {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: min(calc(3 / 1280 * 100vw), .219375rem);
    background-color: #EEEEEE;
}
.blog-wrap__side h4::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 70px;
    height: min(calc(3 / 1280 * 100vw), .219375rem);
    background: linear-gradient(to right, #fec248, #c4f976);
}

.blog-wrap__side ul{
    margin: 20px 0 0;
}

.blog-single__others {
    margin-top: 60px;
}
.blog-single__others-title {
    font-size: 1.25rem;
    font-weight: bold;
    position: relative;
}
.blog-single__others-title::before {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: min(calc(3 / 1280 * 100vw), .219375rem);
    background-color: #EEEEEE;
}
.blog-single__others-title::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 70px;
    height: min(calc(3 / 1280 * 100vw), .219375rem);
    background: linear-gradient(to right, #fec248, #c4f976);
}
.blog-single__others-list {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, 48%);
    gap: 24px;
}
.blog-single__others-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: var(--color-text);
}
.blog-single__others-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
.blog-single__others-thumb--noimage {
    object-fit: contain;
    background-color: #eee;
    padding: 24px;
}
.blog-single__others-item-title {
    font-size: 1rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-single__others-item:hover .blog-single__others-item-title {
    color: var(--color-accent);
}
.blog-single__others-btn {
    display: grid;
    place-items: center;
    margin-top: 40px;
}

.blog-wrap__side-note a {
    display: grid;
    place-items: center;
    width: 100%;
    height: 150px;
    border: 1px solid var(--color-text);
    border-radius: min( calc(8/1280*100vw), .585rem);
    margin: 20px 0 0;
}
.blog-wrap__side-note a img {
    width: 50%;
}
.blog-wrap__side-category ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 20px 0 0;
}
.blog-wrap__side-category a {
    display: grid;
    place-items: center;
    padding: 6px 16px;
    color: var(--color-text);
    background-color: var(--color-white);
    border: 1px solid var(--color-accent);
    border-radius: min(calc(8 / 1280 * 100vw), 0.585rem);
    font-size: 0.875rem;
    width: 100%;
    font-weight: bold;
    line-height: 1;
    text-decoration: none;
    transition: color 0.5s ease-out,
    background-color 0.5s ease-out,
    border-color 0.5s ease-out;
}
.blog-wrap__side-category a:hover {
    color: var(--color-white);
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.blog-wrap__side-category a:hover {
    color: var(--color-white);
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.pagination{
    margin: 30px auto 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pagination__item {
    margin: 0 0.25em;
}
.page-numbers {
    color: var(--color-text);
    font-weight: 400;
    border: 1px solid var(--color-accent);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: grid;place-items: center;
    transition: color 0.3s ease-out,
                background-color 0.3s ease-out,
                border-color 0.3s ease-out,
                font-weight 0.3s ease-out;
}
.page-numbers.current {
    color: white;
    background-color: var(--color-accent);
    border: 1px solid var(--color-accent);
}
.page-numbers.dots,
.page-numbers.prev,
.page-numbers.next {
    border: 1px solid var(--color-accent);
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.page-numbers:not(.current):not(.dots):not(.prev):not(.next):hover,
.page-numbers.prev:hover,
.page-numbers.next:hover {
    color: white;
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}
.page-numbers.dots {
    border: none;
    width: initial;
    height: initial;
    border-radius: 0;
}

.archive-list {
    margin: 20px 0 0;
}

.archive-list__all {
    display: inline-block;
    color: var(--color-text);
    text-decoration: none;
    font-weight: bold;
}

.archive-list__year-block {
    margin-bottom: 16px;
}

.archive-list__year {
    font-weight: bold;
    margin: 0 0 6px;
}

.archive-list__months {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.archive-list__months a {
    display: block;
    text-align: center;
    font-size: 0.8rem;
    padding: 4px 2px;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: 4px;
    text-decoration: none;
    transition: color 0.3s ease-out,
                background-color 0.3s ease-out;
}

.archive-list__months a:hover,
.archive-list__months a.is-active {
    color: var(--color-white);
    background-color: var(--color-accent);
}

.archive-list__empty {
    display: block;
    text-align: center;
    font-size: 0.8rem;
    padding: 4px 2px;
    color: #ccc;
}
.archive-list__select {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    padding: 8px 36px 8px 12px;
    margin: 12px 0 8px;
    color: var(--color-text);
    background-color: var(--color-white);
    border: 1px solid var(--color-text);
    border-radius: min(calc(8 / 1280 * 100vw), 0.585rem);
    font-size: 0.875rem;
    font-weight: bold;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333333' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.archive-list__select:focus {
    outline: none;
    border-color: var(--color-text);
}
.pickup-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pickup-list__link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--color-text);
}

.pickup-list__thumb,
.pickup-list__no-thumb {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.pickup-list__no-thumb {
    background-color: #eee;
}

.pickup-list__title {
    font-size: 0.875rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pickup-list__link:hover .pickup-list__title {
    color: var(--color-accent);
}

.blog-wrap__main a{
    color: var(--color-text);
}
.blog-single__title{
    margin-top: 10px;
    position: relative;
}
.blog-single__title::before {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: min(calc(3 / 1280 * 100vw), .219375rem);
    background-color: #EEEEEE;
}
.blog-single__title::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 70px;
    height: min(calc(3 / 1280 * 100vw), .219375rem);
    background: linear-gradient(to right, #fec248, #c4f976);
}

.blog-single__date{
    margin-top: 10px;
    color: #aaa;
}
.blog-single__content{
    margin-top: 20px;
}
.blog-single__content strong{
    font-weight: 700;
}
.blog-single__content figure + p,
.blog-single__content p + figure{
    margin-top: 10px;
}

@media screen and (max-width: 768px) {
    .page-blog{
        padding-top: 70px;
    }
    .blog-wrap{
        flex-wrap: wrap;
        padding: 40px 25px;
    }
    .blog-wrap__side,
    .blog-wrap__main{
        width: 100%;
    }
    .blog-wrap__main-list{
        gap: 20px 10px;
    }
    .blog-wrap__main-list > li{
        width: calc(( 100% - 10px ) / 2);
        padding: 20px;
        border-radius: 20px;
    }
    .blog-wrap__achieve-title{
        font-size: 16px;
    }
    .blog-wrap__achieve-title + p{
        font-size: 12px;
        margin-top: 4px;
    }
    .blog-wrap__main-list .tag-list{
        font-size: 12px;
    }
    .blog-wrap__achieve-thumb.no_image p{
        font-size: 12px;
    }
    .blog-single__others-list {
    grid-template-columns: repeat(2, 47%);
    gap: 16px;
}
}