.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;
}

@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-tag-container{
    background-color: #F0F2FA;
}

.blog-tag-content{
    display: flex;
    justify-content: center;
    gap: calc(100vw * 10 / 1440);
    padding-top: calc(100vw * 96 / 1440);
    margin-bottom: calc(100vw * 75 / 1440);
}

.blog-tag-area a{
    background-color: #28476B;
    color: #ffffff;
    box-shadow: calc(100vw * 4 / 1440) calc(100vw * 4 / 1440) calc(100vw * 4 / 1440) 0 rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100vw * 265 / 1440);
    height: calc(100vw * 55 / 1440);
    font-size: calc(100vw * 24 / 1440);
    font-weight: 500;
    line-height: 160%;
    font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
    text-decoration: none;
    border: calc(100vw * 2 / 1440) solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.blog-tag-area a.is-active{
    background-color: #28476B;
    color: #ffffff;
    border-color: transparent;
}

.blog-tag-area a:not(.is-active){
    background-color: #ffffff;
    color: #28476B;
    border-color: #28476B;
}

.blog-tag-area a:hover{
    transform: translateY(-2px);
}

.blog-tag-area a:focus-visible{
    outline: calc(100vw * 3 / 1440) solid rgba(40, 71, 107, 0.35);
    outline-offset: calc(100vw * 2 / 1440);
}

.blog-details-area{
    width: calc(100vw * 340 / 1440);
    height: calc(100vw * 400 / 1440);
    background-color: #ffffff;
}

.blog-details-area img{
    width: 100%;
    height: calc(100vw * 180 / 1440);
    aspect-ratio: 340/180;
    object-fit: cover;
}

.blog-details-content{
    display: flex;
    gap: calc(100vw * 39 / 1440);
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    width: calc(100vw * 1098 / 1440);
    margin: 0 auto;
    padding-bottom: calc(100vw * 75 / 1440);
}

.blog-details-area h2{
    font-size: calc(100vw * 18 / 1440);
    font-weight: bold;
    line-height: 160%;
    font-family: "Noto Sans JP", sans-serif;
    padding-top: calc(100vw * 20 / 1440);
    padding-left: calc(100vw * 24 / 1440);
    padding-right: calc(100vw * 24 / 1440);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.blog-detatils-data{
    display: flex;
    justify-content: space-between;
    padding-top: calc(100vw * 24 / 1440);
    padding-left: calc(100vw * 24 / 1440);
    padding-right: calc(100vw * 24 / 1440);
}

.blog-detatils-data-tag p{
    width: calc(100vw * 120 / 1440);
    height: calc(100vw * 33 / 1440);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F0F2FA;
    font-size: calc(100vw * 16 / 1440);
    font-family: "Anonymous Pro", "Hiragino Sans", "Yu Gothic", sans-serif;
    font-weight: bold;
    color: #28476B;
}

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

.blog-detatils-link{
    margin-top: calc(100vw * 24 / 1440);
    text-align: center;
}

.blog-detatils-link a{
    background-color: #28476B;
    color: #ffffff;
    height: calc(100vw * 40 / 1440);
    width: calc(100vw * 220 / 1440);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: calc(100vw * 4 / 1440) calc(100vw * 4 / 1440) calc(100vw * 4 / 1440) 0 rgba(0, 0, 0, 0.25);
    border-radius: calc(100vw * 40 / 1440);
    margin: 0 auto;
    font-weight: bold;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-detatils-link a:hover{
    transform: translateY(-2px);
}

@media(max-width:768px){
    .blog-tag-content{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: calc(100vw * 8 / 375);
        padding-top: calc(100vw * 30 / 375);
        margin-bottom: calc(100vw * 39 / 375);
    }

    .blog-tag-area a{
        width: calc(100vw * 166 / 375);
        height: calc(100vw * 29 / 375);
        font-size: calc(100vw * 18 / 375);
        border: calc(100vw * 2 / 375) solid transparent;
    }

    .blog-tag-area a:focus-visible{
        outline: calc(100vw * 3 / 375) solid rgba(40, 71, 107, 0.35);
        outline-offset: calc(100vw * 2 / 375);
    }

    .blog-details-area{
        width: calc(100vw * 340 / 375);
        height: calc(100vw * 400 / 375);
    }

    .blog-details-area img{
        width: 100%;
        height: calc(100vw * 180 / 375);
        aspect-ratio: 340/180;
    }

    .blog-details-content{
        display: flex;
        gap: calc(100vw * 39 / 375);
        justify-content: center;
        flex-wrap: wrap;
        width: calc(100vw * 339 / 375);
        margin: 0 auto;
        padding-bottom: calc(100vw * 75 / 375);
    }

    .blog-details-area h2{
        font-size: calc(100vw * 15 / 375);
        padding-top: calc(100vw * 25 / 375);
        padding-left: calc(100vw * 24 / 375);
        padding-right: calc(100vw * 24 / 375);
    }

    .blog-detatils-data{
        justify-content: space-between;
        padding-top: calc(100vw * 24 / 375);
        padding-left: calc(100vw * 24 / 375);
        padding-right: calc(100vw * 24 / 375);
    }

    .blog-detatils-data-tag p{
        width: calc(100vw * 120 / 375);
        height: calc(100vw * 33 / 375);
        font-size: calc(100vw * 16 / 375);
    }

    .blog-detatils-data-day p{
        line-height: 160%;
        font-size: calc(100vw * 16 / 375);
    }

    .blog-detatils-link{
        margin-top: calc(100vw * 24 / 375);
        text-align: center;
    }

    .blog-detatils-link a{
        background-color: #28476B;
        color: #ffffff;
        height: calc(100vw * 40 / 375);
        width: calc(100vw * 220 / 375);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 4px 4px 4px 0 rgb(0, 0, 0, 0.25);
        border-radius: calc(100vw * 40 / 375);
        margin: 0 auto;
        font-weight: bold;
        text-decoration: none;
    }
}

.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[disabled]{
    opacity: 0.4;
    cursor: not-allowed;
}

.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,
.blog-nav-pages a,
.blog-nav-pages span{
    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;
    box-sizing: border-box;
}

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

@media(max-width:768px){
    .blog-nav {
        background: #F0F2FA;
        padding-bottom: calc(100vw * 88 / 375);
    }

    .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);
    }

    .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,
    .blog-nav-pages a,
    .blog-nav-pages span{
        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-pages span.current,
    .blog-nav-page.is-active {
        background: transparent;
        color: #28476B;
    }

    .blog-tag-area a{
        border: calc(100vw * 2 / 375) solid transparent;
    }
}