img{
	width:100%;
}

.blog-fv-container{
    background-image: url(assets/image/blog-fv.webp);
    background-size: cover;
    background-position: center;
}

.blog-fv-content{
    padding-top: calc(100vw * 81.5 / 1440);
    padding-bottom: calc(100vw * 81.5 / 1440);
    padding-left: calc(100vw * 200 / 1440);
    padding-right: calc(100vw * 200 / 1440);
}

.blog-fv-content h1{
    font-size: calc(100vw * 40 / 1440);
    line-height: calc(100vw * 44 / 1440);
    font-weight: bold;
    color: #ffffff;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
}

.blog-fv-content p{
    font-size: calc(100vw * 25 / 1440);
    line-height: calc(100vw * 44 / 1440);
    color: #ffffff;
    font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}

.blog-details-wrapper{
    padding-top: calc(100vw * 53 / 1440);
}

.blog-details-content{
    width: calc(100vw * 1040 / 1440);
    margin: 0 auto;
}

.blog-details-img img{
    height: auto;
    width: 100%;
    aspect-ratio: 340 / 180;
    object-fit: cover;
}

.blog-details-tag{
    margin-top: calc(100vw * 45 / 1440);
}

.blog-details-tag p{
    background-color: #F0F2FA;
    width: calc(100vw * 265 / 1440);
    height: calc(100vw * 38 / 1440);
    font-size: calc(100vw * 24 / 1440);
    line-height: 160%;
    color: #28476B;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-details-heading{
    margin-top: calc(100vw * 45 / 1440);
}

.blog-details-heading h2{
    font-size: calc(100vw * 24 / 1440);
    font-weight: bold;
    line-height: 160%;
    color: #28476B;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
}

.blog-details-data{
    margin-top: calc(100vw * 24 / 1440);
    text-align: end;
}

.blog-details-data p{
    font-size: calc(100vw * 16 / 1440);
    line-height: 160%;
    color: #000000;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
}

.blog-details-area{
    margin-top: calc(100vw * 45 / 1440);
}

.blog-details-area p{
    font-size: calc(100vw * 16 / 1440);
    line-height: 200%;
    font-family: "Noto Sans JP", sans-serif;
}

.post-nav{
    width: calc(100vw * 1040 / 1440);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(100vw * 10 / 1440);
    height: calc(100vw * 58 / 1440);
    margin-top: calc(100vw * 70 / 1440);
    padding-top: calc(100vw * 25 / 1440);
    padding-bottom: calc(100vw * 25 / 1440);
}

.post-nav-side{
    display: inline-flex;
    align-items: center;
    gap: calc(100vw * 10 / 1440);
    color: #28476B;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    font-size: calc(100vw * 15 / 1440);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post-nav-side:hover{
    transform: translateY(-2px);
}

.post-nav-side span.post-nav-label{
    color: #000000;
}

.post-nav-circle svg{
    width: calc(100vw * 14 / 1440);
}

.blog-nav{
    width: 100%;
    background: #F0F2FA;
    padding-bottom: calc(100vw * 75 / 1440);
}

.blog-nav-inner{
    width: min(calc(100vw * 1200 / 1440), 100%);
    margin: 0 auto;
    padding: 0 calc(100vw * 24 / 1440);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(100vw * 25 / 1440);
}

.blog-nav-btn{
    width: calc(100vw * 34 / 1440);
    height: calc(100vw * 34 / 1440);
    border-radius: 9999px;
    background: #ffffff;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.blog-nav-btn-icon{
    width: 0;
    height: 0;
    border-style: solid;
}

.blog-nav-btn-icon-prev{
    border-width: calc(100vw * 5.5 / 1440) calc(100vw * 11 / 1440) calc(100vw * 5.5 / 1440) 0;
    border-color: transparent #28476B transparent transparent;
    margin-left: calc(100vw * -2 / 1440);
}

.blog-nav-btn-icon-next{
    border-width: calc(100vw * 5.5 / 1440) 0 calc(100vw * 5.5 / 1440) calc(100vw * 11 / 1440);
    border-color: transparent transparent transparent #28476B;
    margin-right: calc(100vw * -2 / 1440);
}

.blog-nav-pages{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(100vw * 25 / 1440);
    font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
    font-weight: bold;
}

.blog-nav-page{
    width: calc(100vw * 34 / 1440);
    height: calc(100vw * 34 / 1440);
    border-radius: 9999px;
    border: calc(100vw * 1 / 1440) solid #28476B;
    color: #28476B;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: calc(100vw * 13 / 1440);
    background: #ffffff;
    transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.blog-nav-page.is-active{
    background: transparent;
    color: #28476B;
}

.post-nav-center-inner{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(100vw * 12 / 1440);
    padding: calc(100vw * 12 / 1440) 0;
    font-size: calc(100vw * 16 / 1440);
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(40, 71, 107, 1);
    box-shadow: calc(100vw * 4 / 1440) calc(100vw * 4 / 1440) calc(100vw * 4 / 1440) rgba(0, 0, 0, 0.25);
    text-decoration: none;
    border: none;
    width: calc(100vw * 280 / 1440);
    height: calc(100vw * 58 / 1440);
    letter-spacing: 0.03em;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post-nav-center-inner img{
    width: calc(100vw * 19 / 1440);
    height: calc(100vw * 19 / 1440);
}

.post-nav-center-inner:hover{
    transform: translateY(-2px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}



.blog-nav-content{
    margin-bottom: calc(100vw * 103 / 1440);
    text-align: center;
}

.post-nav-circle{
    width: calc(100vw * 44 / 1440);
    height: calc(100vw * 44 / 1440);
    border-radius: 9999px;
    background: #ffffff;
    border: calc(100vw * 1 / 1440) solid #28476B;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.post-nav-icon{
    width: calc(100vw * 18 / 1440);
    height: calc(100vw * 18 / 1440);
    display: block;
}

.post-band-connection-container{
    background: #28476B;
}

.post-band-connection-wrapper{
    background-color: #28476B;
}

.post-band-connection-content{
    text-align: center;
    padding-top: calc(100vw * 16 / 1440);
    padding-bottom: calc(100vw * 16 / 1440);
    height: calc(100vw * 58 / 1440);
}

.post-band-connection-content p{
    font-size: calc(100vw * 20 / 1440);
    font-weight: bold;
    color: #ffffff;
}

.post-connection-container{
    width: 100%;
    background-color: #F0F2FA;
}

.post-connection-wrapper{
    max-width: calc(100vw * 1200 / 1440);
    margin: 0 auto;
    padding-left: calc(100vw * 20 / 1440);
    padding-right: calc(100vw * 20 / 1440);
    padding-top: calc(100vw * 133 / 1440);
    padding-bottom: calc(100vw * 133 / 1440);
}

.post-connection-content{
    width: 100%;
}

.post-connection-slider{
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(100vw * 24 / 1440);
    width: 100%;
}

.post-connection-viewport{
    overflow: hidden;
    width: calc(100vw * 1040 / 1440);
}

.post-connection-track{
    display: flex;
    gap: calc(100vw * 24 / 1440);
    will-change: transform;
    transition: transform 0.35s ease;
}

.post-connection-slide{
    flex: 0 0 auto;
    width: calc((100% - calc(100vw * 48 / 1440)) / 3);
}

.post-connection-card{
    width: 100%;
    height: calc(100vw * 400 / 1440);
    overflow: hidden;
    background: #ffffff;
}

.post-connection-card-link{
    display: block;
    color: inherit;
    text-decoration: none;
}

.post-connection-card-image{
    width: 100%;
    height: calc(100vw * 180 / 1440);
    overflow: hidden;
}

.post-connection-card-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

h3.post-connection-card-title{
    font-size: calc(100vw * 18 / 1440);
    font-weight: bold;
    line-height: 160%;
    font-family: "Noto Sans JP", sans-serif;
    padding-top: calc(100vw * 24 / 1440);
    padding-bottom: calc(100vw * 24 / 1440);
    padding-left: calc(100vw * 24 / 1440);
    padding-right: calc(100vw * 24 / 1440);
    max-width: 32ch;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

h3.post-connection-card-title .post-connection-card-title-text{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.post-connection-card-meta{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(100vw * 12 / 1440);
    padding-left: calc(100vw * 24 / 1440);
    padding-right: calc(100vw * 24 / 1440);
}

.post-connection-card-tag p{
    padding: calc(100vw * 6 / 1440) calc(100vw * 10 / 1440);
    font-size: calc(100vw * 18 / 1440);
    line-height: 1;
    background: #f0f2fa;
    color: #28476B;
    font-weight: 700;
    min-width: calc(100vw * 120 / 1440);
    text-align: center;
    min-height: calc(100vw * 33 / 1440);
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-connection-card-date p{
    font-size: calc(100vw * 16 / 1440);
    line-height: 1;
}

.post-connection-card-cta{
    padding: 0;
    padding-top: calc(100vw * 24 / 1440);
    text-align: center;
}

.post-connection-card-cta span{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(100vw * 220 / 1440);
    height: calc(100vw * 40 / 1440);
    font-size: calc(100vw * 15 / 1440);
    font-weight: 500;
    background: #28476B;
    color: #ffffff;
    margin: 0 auto;
    font-family: "Noto Sans JP", sans-serif;
    border-radius: calc(100vw * 40 / 1440);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: calc(100vw * 4 / 1440) calc(100vw * 4 / 1440) calc(100vw * 4 / 1440) rgba(0, 0, 0, 0.25);
}

.post-connection-card-cta span:hover{
    transform: translateY(-2px);
}

.post-connection-arrow{
    flex: 0 0 auto;
    width: calc(100vw * 44 / 1440);
    height: calc(100vw * 44 / 1440);
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.post-connection-arrow-circle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(100vw * 44 / 1440);
    height: calc(100vw * 44 / 1440);
    border-radius: 999px;
    color: #28476b;
    border: calc(100vw * 1 / 1440) solid #28476B;
}

.post-connection-arrow-circle svg{
    width: calc(100vw * 18 / 1440);
    height: calc(100vw * 18 / 1440);
    display: block;
}

.post-connection-arrow-prev .post-connection-arrow-circle svg{
    transform: rotate(180deg);
}

.post-connection-empty{
    padding: calc(100vw * 20 / 1440) 0;
}

@media(max-width:768px){
    .blog-fv-container{
        background-image: url(assets/image/blog-fv.webp);
        background-size: cover;
        background-position: center;
    }

    .blog-fv-content{
        padding-top: calc(100vw * 23 / 375);
        padding-bottom: calc(100vw * 23 / 375);
        padding-left: calc(100vw * 18 / 375);
        padding-right: calc(100vw * 18 / 375);
        height: calc(100vw * 95 / 375);
    }

    .blog-fv-content h1{
        font-size: calc(100vw * 20 / 375);
    }

    .blog-fv-content p{
        font-size: calc(100vw * 10 / 375);
        line-height: calc(100vw * 44 / 375);
    }

    .blog-details-wrapper{
        padding-top: calc(100vw * 24 / 375);
    }

    .blog-details-content{
        width: calc(100vw * 339 / 375);
        margin: 0 auto;
    }

    .blog-details-tag{
        margin-top: calc(100vw * 30 / 375);
    }

    .blog-details-tag p{
        background-color: #F0F2FA;
        width: calc(100vw * 133 / 375);
        height: calc(100vw * 24 / 375);
        font-size: calc(100vw * 15 / 375);
    }

    .blog-details-heading{
        margin-top: calc(100vw * 30 / 375);
    }

    .blog-details-heading h2{
        font-size: calc(100vw * 18 / 375);
    }

    .blog-details-data{
        margin-top: calc(100vw * 13 / 375);
        text-align: end;
    }

    .blog-details-data p{
        font-size: calc(100vw * 16 / 375);
        line-height: 160%;
        color: #000000;
        font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
    }

    .blog-details-area{
        margin-top: calc(100vw * 45 / 375);
    }

    .blog-details-area p{
        font-size: calc(100vw * 15 / 375);
    }

    .post-nav{
        width: calc(100vw * 339 / 375);
        gap: calc(100vw * 10 / 375);
        height: calc(100vw * 58 / 375);
        margin-top: calc(100vw * 30 / 375);
        padding-top: calc(100vw * 24 / 375);
        padding-bottom: calc(100vw * 31 / 375);
    }

    .post-nav-side{
        gap: calc(100vw * 10 / 375);
        font-size: calc(100vw * 16 / 375);
    }

    .blog-nav{
        background: #F0F2FA;
        padding-bottom: 0;
    }

    .blog-nav-inner{
        width: min(calc(100vw * 1200 / 375), 100%);
        margin: 0 auto;
        padding: 0 calc(100vw * 24 / 375);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: calc(100vw * 15 / 375);
    }

    .post-nav-circle svg{
        width: calc(100vw * 14 / 375);
    }

    .blog-nav-btn{
        width: calc(100vw * 34 / 375);
        height: calc(100vw * 34 / 375);
    }

    .blog-nav-btn-icon-prev{
        border-width: calc(100vw * 5.5 / 375) calc(100vw * 11 / 375) calc(100vw * 5.5 / 375) 0;
        margin-left: calc(100vw * -2 / 375);
    }

    .blog-nav-btn-icon-next{
        border-width: calc(100vw * 5.5 / 375) 0 calc(100vw * 5.5 / 375) calc(100vw * 11 / 375);
        margin-right: calc(100vw * -2 / 375);
    }

    .blog-nav-pages{
        gap: calc(100vw * 15 / 375);
    }

    .blog-nav-page{
        width: calc(100vw * 34 / 375);
        height: calc(100vw * 34 / 375);
        border-radius: 9999px;
        border: calc(100vw * 1 / 375) solid #28476B;
        color: #28476B;
        font-size: calc(100vw * 13 / 375);
    }

    .blog-nav-page.is-active{
        background: transparent;
        color: #28476B;
    }

    .post-nav-center-pc{
        display: none;
    }

    .post-nav-center{
        text-align: center;
        line-height: 1;
    }

    .post-nav-center-inner{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: calc(100vw * 10 / 375);
        padding: calc(100vw * 16 / 375);
        font-size: calc(100vw * 16 / 375);
        font-weight: bold;
        border: none;
        width: calc(100vw * 284 / 375);
        height: calc(100vw * 58 / 375);
        margin: 0 auto;
        text-align: center;
    }

    .post-nav-center-inner img{
        width: calc(100vw * 19 / 375);
        height: calc(100vw * 19 / 375);
    }

    .post-nav-circle{
        width: calc(100vw * 34 / 375);
        height: calc(100vw * 34 / 375);
        border: calc(100vw * 1 / 375) solid #28476B;
    }

    .post-nav-icon{
        width: calc(100vw * 18 / 375);
        height: calc(100vw * 18 / 375);
    }

    .post-band-connection-content{
        padding-top: calc(100vw * 16 / 375);
        padding-bottom: calc(100vw * 16 / 375);
        height: calc(100vw * 58 / 375);
    }

    .post-band-connection-content p{
        font-size: calc(100vw * 20 / 375);
    }

    .post-connection-wrapper{
        max-width: calc(100vw * 1200 / 375);
        margin: 0 auto;
        padding-left: calc(100vw * 20 / 375);
        padding-right: calc(100vw * 20 / 375);
        padding-top: calc(100vw * 133 / 375);
        padding-bottom: calc(100vw * 133 / 375);
    }

    .post-connection-slider{
        gap: calc(100vw * 24 / 375);
    }

    .post-connection-viewport{
        width: calc(100vw * 1040 / 375);
    }

    .post-connection-track{
        gap: calc(100vw * 24 / 375);
    }

    .post-connection-card{
        height: calc(100vw * 400 / 375);
    }

    .post-connection-card-image{
        height: calc(100vw * 180 / 375);
    }

    h3.post-connection-card-title{
        font-size: calc(100vw * 18 / 375);
        padding-top: calc(100vw * 24 / 375);
        padding-bottom: calc(100vw * 24 / 375);
        padding-left: calc(100vw * 24 / 375);
        padding-right: calc(100vw * 24 / 375);
    }

    .post-connection-card-meta{
        gap: calc(100vw * 12 / 375);
        padding-left: calc(100vw * 24 / 375);
        padding-right: calc(100vw * 24 / 375);
    }

    .post-connection-card-tag p{
        padding: calc(100vw * 6 / 375) calc(100vw * 10 / 375);
        font-size: calc(100vw * 18 / 375);
        min-width: calc(100vw * 120 / 375);
        min-height: calc(100vw * 33 / 375);
    }

    .post-connection-card-date p{
        font-size: calc(100vw * 16 / 375);
    }

    .post-connection-card-cta{
        padding-top: calc(100vw * 24 / 375);
    }

    .post-connection-card-cta span{
        width: calc(100vw * 220 / 375);
        height: calc(100vw * 40 / 375);
        font-size: calc(100vw * 15 / 375);
        border-radius: calc(100vw * 40 / 375);
        box-shadow: calc(100vw * 4 / 375) calc(100vw * 4 / 375) calc(100vw * 4 / 375) rgba(0, 0, 0, 0.25);
    }

    .post-connection-arrow{
        width: calc(100vw * 44 / 375);
        height: calc(100vw * 44 / 375);
    }

    .post-connection-arrow-circle{
        width: calc(100vw * 44 / 375);
        height: calc(100vw * 44 / 375);
        border: none;
    }

    .post-connection-arrow-circle svg{
        width: calc(100vw * 18 / 375);
        height: calc(100vw * 18 / 375);
    }

    .post-connection-empty{
        padding: calc(100vw * 20 / 375) 0;
    }
}

@media(min-width:769px){
    .post-nav-center-sp{
        display: none;
    }
}
@media(min-width:769px){
	.post-connection-container-sp{
		display:none;
	}
}
@media (max-width: 768px){
    .post-connection-wrapper{
        padding-left: calc(100vw * 16 / 375);
        padding-right: calc(100vw * 16 / 375);
    }

    .post-connection-track{
        gap: calc(100vw * 16 / 375);
    }

    .post-connection-slide{
        width: calc((100% - calc(100vw * 16 / 375)) / 2);
    }

    .post-connection-arrow{
        width: calc(100vw * 40 / 375);
        height: calc(100vw * 40 / 375);
    }

    .post-connection-arrow-circle{
        width: calc(100vw * 40 / 375);
        height: calc(100vw * 40 / 375);
    }
}
@media (max-width: 768px){

    .post-connection-container-pc{
        display: none;
    }

    .post-connection-container-sp{
        display: block;
    }

    .post-connection-container-sp .post-connection-wrapper{
        max-width: calc(100vw * 1200 / 375);
        margin: 0 auto;
        padding-left: calc(100vw * 16 / 375);
        padding-right: calc(100vw * 16 / 375);
        padding-top: calc(100vw * 60 / 375);
        padding-bottom: calc(100vw * 96 / 375);
    }

    .post-connection-container-sp .post-connection-content{
        width: 100%;
    }

    .post-connection-container-sp .post-connection-list{
        display: grid;
        grid-template-columns: 1fr;
        gap: calc(100vw * 16 / 375);
    }

    .post-connection-container-sp .post-connection-slide{
        width: 100%;
    }

    .post-connection-container-sp .post-connection-card{
        width: 100%;
        height: calc(100vw * 400 / 375);
        overflow: hidden;
        background: #ffffff;
    }

    .post-connection-container-sp .post-connection-card-image{
        width: 100%;
        height: calc(100vw * 180 / 375);
        overflow: hidden;
    }

    .post-connection-container-sp .post-connection-card-image img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .post-connection-container-sp h3.post-connection-card-title{
        font-size: calc(100vw * 18 / 375);
        font-weight: bold;
        line-height: 160%;
        font-family: "Noto Sans JP", sans-serif;
        padding-top: calc(100vw * 24 / 375);
        padding-bottom: calc(100vw * 24 / 375);
        padding-left: calc(100vw * 24 / 375);
        padding-right: calc(100vw * 24 / 375);
        max-width: 32ch;
        width: 100%;
        box-sizing: border-box;
        min-width: 0;
    }

    .post-connection-container-sp h3.post-connection-card-title .post-connection-card-title-text{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .post-connection-container-sp .post-connection-card-meta{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: calc(100vw * 12 / 375);
        padding-left: calc(100vw * 24 / 375);
        padding-right: calc(100vw * 24 / 375);
    }

    .post-connection-container-sp .post-connection-card-tag p{
        padding: calc(100vw * 6 / 375) calc(100vw * 10 / 375);
        font-size: calc(100vw * 18 / 375);
        line-height: 1;
        background: #f0f2fa;
        color: #28476B;
        font-weight: 700;
        min-width: calc(100vw * 120 / 375);
        text-align: center;
        min-height: calc(100vw * 33 / 375);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .post-connection-container-sp .post-connection-card-date p{
        font-size: calc(100vw * 16 / 375);
        line-height: 1;
    }

    .post-connection-container-sp .post-connection-card-cta{
        padding: 0;
        padding-top: calc(100vw * 24 / 375);
        text-align: center;
    }

    .post-connection-container-sp .post-connection-card-cta span{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: calc(100vw * 220 / 375);
        height: calc(100vw * 40 / 375);
        font-size: calc(100vw * 15 / 375);
        font-weight: 500;
        background: #28476B;
        color: #ffffff;
        margin: 0 auto;
        font-family: "Noto Sans JP", sans-serif;
        border-radius: calc(100vw * 40 / 375);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        box-shadow: calc(100vw * 4 / 375) calc(100vw * 4 / 375) calc(100vw * 4 / 375) rgba(0, 0, 0, 0.25);
    }

    .post-connection-container-sp .post-connection-card-cta span:hover{
        transform: translateY(-2px);
    }

    .post-connection-container-sp .post-connection-empty{
        padding: calc(100vw * 20 / 375) 0;
        text-align: center;
    }

    .post-connection-container-sp .post-connection-pagination{
        margin-top: calc(100vw * 65 / 375);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: calc(100vw * 12 / 375);
        flex-wrap: wrap;
        font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
        font-weight: bold;
    }

    .post-connection-container-sp .post-connection-page{
        width: calc(100vw * 34 / 375) !important;
        height: calc(100vw * 34 / 375);
        border-radius: 9999px;
        border: calc(100vw * 1 / 375) solid #28476B;
        color: #28476B;
        background: #ffffff;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: calc(100vw * 13 / 375);
        line-height: 1;
    }

    .post-connection-container-sp .post-connection-page.is-active{
        background: #28476B;
        color: #ffffff;
    }

    .post-connection-container-sp .post-connection-page-prev,
    .post-connection-container-sp .post-connection-page-next{
        width: auto;
        padding-left: calc(100vw * 12 / 375);
        padding-right: calc(100vw * 12 / 375);
        gap: calc(100vw * 8 / 375);
    }

    .post-connection-container-sp .post-connection-page-text{
        font-size: calc(100vw * 12 / 375);
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }

    .post-connection-container-sp .post-connection-page-arrow{
        width: 0;
        height: 0;
        border-style: solid;
    }

    .post-connection-container-sp .post-connection-page-prev .post-connection-page-arrow{
        border-width: calc(100vw * 5 / 375) calc(100vw * 8 / 375) calc(100vw * 5 / 375) 0;
        border-color: transparent #28476B transparent transparent;
    }

    .post-connection-container-sp .post-connection-page-next .post-connection-page-arrow{
        border-width: calc(100vw * 5 / 375) 0 calc(100vw * 5 / 375) calc(100vw * 8 / 375);
        border-color: transparent transparent transparent #28476B;
    }

    .post-connection-container-sp .post-connection-page-prev.is-active .post-connection-page-arrow{
        border-color: transparent #ffffff transparent transparent;
    }

    .post-connection-container-sp .post-connection-page-next.is-active .post-connection-page-arrow{
        border-color: transparent transparent transparent #ffffff;
    }
.post-connection-container-sp .post-connection-page-prev .post-connection-arrow-circle svg{
	transform: rotate(180deg);
}
}