@charset "UTF-8";

/* bundle.css 修正 */

.archive-main-head-image.new {
    height: 56.66667vw;
    margin-top: 3.33333vw;
}
.archive-main-head-text.new {
    margin: 10vw 6.66667vw 0;
}
.archive-main-head-text-desc.new {
    margin: 6vw 0 0;
    font-size: 3.73333vw;
    line-height: 2;
    letter-spacing: .1em;
}

@media (max-width: 768px) {
    .archive-wrapper .archive-main .archive-main-head .archive-main-head-image,
    .archive-wrapper .archive-main .archive-main-head.no-image,
    .single-wrapper .single-main .single-main-head,
    .page-wrapper .page-main .page-main-head,
    .form-wrapper .form-main .form-main-head {
        margin-top: 3.33333vw;
    }
    .archive-main-head-text {
        text-align: center;
    }
    .archive-main-head-text-desc {
        text-align: left;
    }
}


@media (min-width: 768px) {
    .archive-wrapper.new,
    .archive-wrapper,
    .single-wrapper,
    .form-wrapper {
        margin: 0 auto 0;
    }
    .sidebar.new {
        z-index: 2;
        position: sticky;
        top: 130px;
    }
    .sidebar {
        top: 170px;
    }
    .sidebar-lists.top130 {
        position: sticky;
        top: 130px;
    }
    .archive-main-head-text-desc.new {
        margin: 0;
        font-size: 16px;
        letter-spacing: .1em;
        line-height: 2.85;
    }
    .archive-main-head.new {
        margin: 0 auto;
        display: flex;
        padding-inline: 30px;
        max-width: 1350px;
        min-width: 1185px;
        gap: 50px;
    }
    
    .archive-main-head-image.new {
        min-width: 550px;
        height: 350px;
        margin-top: 0;
    }

    .archive-main-head-image {
        margin-top: 0;
    }
    
    .archive-main-head-text.new {
        margin: auto 0;
    }
    .archive-wrapper .archive-main.new {
        padding-left: 60px;
    }
    .page-wrapper {
        margin: 35px auto 0;
    }
}


/* パンくず */

.breadcrumb .breadcrumb-item {
    display: inline-block;
}
.breadcrumb .breadcrumb-item::before {
    display: inline-block;
    text-decoration: none !important;
}

@media (max-width: 768px) {
    .breadcrumb {
        margin: 25vw 5vw 0;
        font-size: 2.4vw;
        line-height: 2.5;
    }
    .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
        content: "＞";
        margin: 0 6px;
    }
    
    .breadcrumb a:hover {
        text-decoration: underline;
    }
}

@media (min-width: 768px) {
    .breadcrumb {
        position: relative;
        margin: 130px auto 35px;
        width: 1290px;
    }
    
    .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
        content: "＞";
        margin: 0 6px;
        font-size: 12px;
    }
    .breadcrumb-item {
        font-size: 12px;
    }
    
    .breadcrumb a:hover {
        text-decoration: underline;
    }
}

@media (min-width: 768px) and (max-width: 1350px) {
    .breadcrumb {
        margin: 130px 30px 35px;
    }
}



/* 構成変更 */

.archive-main-list {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-template-rows: repeat(1, 1fr);
    gap: 2px;
    text-align: center;
    margin: 50px 6.66667vw 50px;
}

.archive-main-item {
    /* padding: 3vw 1.5vw; */
    padding: 1vw 1.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    /* font-size: 2.5vw; */
    font-size: 3.5vw;
    line-height: 1.5;
    letter-spacing: -0.05em;
    font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, Arial, メイリオ, Meiryo, sans-serif;
    background-color: #e0e0e0;
}

.archive-main-item.active {
    background-color: #f3d552;
}


@media (max-width: 768px) {
    .archive-main-item {
        min-height: 17.222vw;
    }
}

@media (min-width: 768px)  {
    .archive-main-list {
        grid-template-columns: repeat(4, 1fr);
        max-width: 1290px;
        min-width: 1185px;
    }
    .archive-main-list.columns3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .archive-main-list.columns3.flex-center {
        display: flex;
        justify-content: center;
        max-width: 1350px;
        min-width: 1125px;
        padding: 0 30px;
    }
    .archive-main-item {
        padding: 25px 15px;
        font-size: 16px;
    }
    .archive-main-list.columns3.flex-center .archive-main-item {
        width: 321px;
    }
    .brSp {
        display: none;
    }
}


@media (min-width: 768px) and (max-width: 1350px) {
    .archive-main-list {
        margin: 50px 30px;
    }
}

@media (min-width: 1350px) {
    .archive-main-list {
        margin: 50px auto;
    }
}