/*====================================================
////id |  side_toc
====================================================*/
.single .column-wrapper:has(#side_toc) #sidebar {
    position: unset;
}
#side_toc {
    font-size: min(3.4vw, 1.5rem);
}

#side_toc h5 {
    border-bottom: solid 1px;
	font-size: min(4vw, 1.8rem);
    margin-bottom: 1em;
	padding-bottom: .3em;
}
#side_toc .toc_h2 a {
    font-weight: 700;
	line-height: 1.4;
	position: relative;
}
* + .toc_h2 {
    border-top: solid 1px var(--l_gray);
    margin-top: .6em;
    padding-top: .6em;
}

#side_toc .toc_h3 {
    font-size: .9em;
    padding-left: 1em;
}
* + .toc_h3 {
    margin-top: .5em;
}

#side_toc .toc_h3 a {
    padding-left: 1em;
    position: relative;
}
#side_toc .toc_h3 a::before {
    content: '\30FB';
    display: block;
    position: absolute;
        top: 0;
        left: 0;
    width: 1em;
    height: 1em;
}

/* ////////// mobile ////////// */
@media screen and (max-width: 960px) {
    #side_toc {
        z-index: 10;
    }
    #side_toc {
        position: fixed;
            left: 5vw;
            top: 100%;
        transition: .4s ease-in-out;
        width: min(calc(100% - 5vw - 60px), 400px);
        height: 50px;
        z-index: 888;
    }
    #side_toc.hide {
        top: calc(100% + 80px);
    }
    #side_toc h5 {
        background: var(--black);
        backdrop-filter: blur(3px);
        border-bottom: none;
        border-radius: 10px 10px 0 0;
        color: #fff;
        cursor: pointer;
        display: flex;
            align-items: center;
            justify-content: center;
        letter-spacing: .5em;
        margin: 0;
        opacity: .8;
        padding: 0 2.5em 0 1.5em;
        position: absolute;
            left: 0;
            bottom: calc(100% - 1px);
        height: 65px;
    }
    #side_toc.open h5 {
        opacity: 1;
    }
    #side_toc h5::after {
        background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-1 -1 25 25"><path fill="%23ffffff" d="M12,0C5.37,0,0,5.37,0,12s5.37,12,12,12,12-5.37,12-12S18.63,0,12,0ZM10.77,16.17l-1.34-1.34,2.93-2.93-2.93-2.93,1.34-1.34,4.27,4.27-4.27,4.27Z" /></svg>') no-repeat center / contain;
        content: '';
        display: block;
        margin: auto;
        position: absolute;
            top: .1em;
            bottom: 0;
            right: 1em;
        transform: rotate(-90deg);
        transition: .3s ease-in-out;
        width: 1.2em;
        height: 1.2em;
    }
    #side_toc.open h5::after {
        transform: rotate(90deg);
    }
    
    #side_toc .side_toc_items {
        background: rgba(255, 255, 255, .9);
        backdrop-filter: blur(3px);
        border-radius: 0 10px 0 0;
        padding: 1em 1.5em;
        position: relative;
        max-height: calc(100vh - 160px);
        max-height: calc(100svh - 160px);

        overflow-y: scroll;
        -ms-overflow-style: none;    /* IE, Edge 対応 */
        scrollbar-width: none;       /* Firefox 対応 */
    }
    #side_toc .side_toc_items::-webkit-scrollbar {  /* Chrome, Safari 対応 */
        display:none;
    }

    #side_toc .side_toc_items::before {
        border: solid 1px var(--black);
        border-radius: 0 10px 0 0;
        box-sizing: border-box;
        content: '';
        display: block;
        margin: auto;
        pointer-events: none;
        position: absolute;
            top: 0;
            left: 0;
        width: 100%;
        height: 100%;
    }
}

@media screen and (max-width: 769px) {
    #side_toc h5 {
        height: 50px;
    }
}
/* ////////// PC ////////// */
@media print, screen and (min-width: 960px) {
    .single .column-wrapper {
        display: grid;
            grid-template-columns: 1fr min(24vw, 300px);
            grid-template-rows: auto 1fr;
        padding-top: min(8vw, 80px);
    }
    .single main {
        grid-row: 1 / 3;
    }
    #side_toc {
        font-size: min(3.4vw, 1.5rem);
        position: -webkit-sticky;
        position: sticky;
        top: 90px !important;
        width: 100%;
    }
    #side_toc h5 {
        pointer-events: none;
    }
}

@media screen and (min-width:1080px) {
    #side_toc {
        top: 100px !important;
    }
}

@media (hover: hover) {
    #side_toc a:hover {
        opacity: 1;
        color: var(--mainColor);
    }
}

/*====================================================
////id |  connected
====================================================*/
.connected-wrapper {
    padding: min(4vw, 20px) 0 min(8vw, 40px);
    position: relative;
}
.connected-wrapper::before ,
.connected-wrapper::after {
    box-sizing: border-box;
    content: '';
    display: block;
    margin: auto;
    position: absolute;
    width: 100%;
    height: 100%;
}
.connected-wrapper::before {
    background: var(--w_yellow);
    border: solid var(--d_gray);
    border-width: 0 2px 2px 0;
    top: min(1vw, 7px);
    left: min(1vw, 6px);
    z-index: -2;
}
.connected-wrapper::after {
    background: #fff;
    border: solid 2px var(--d_gray);
    top: 0;
    left: 0;
    z-index: -1;
}
.connected-head {
    background: var(--black);
    color: #fff;
    display: inline-block;
    font-size: min(4.2vw, 2.2rem);
    margin-left: -10px;
    padding: .2em .8em;
}
.archive_itemBox {
    display: grid;
        grid-gap: min(8vw, 30px) min(4vw, 30px);
    padding: min(5vw, 30px) min(3vw, 40px) 0;
}
.archive_item a {
    display: grid;
        grid-gap: min(3vw, 15px) min(3.8vw, 15px);
        grid-template-rows: auto 1fr auto;
    height: 100%;
}
.archive_item .coverImg {
    padding-top: 100%;
    transition: .3s ease-in-out;
}
.archive_item .txtBox {
    display: grid;
        grid-template-rows: auto 1fr auto;
}
.cate_item {
    font-size: min(3vw, 12px);
}

.archive_item .title  {
    font-size: min(4.1vw, 17px);
    font-weight: 700;
    line-height: 1.6;
    margin: .3em 0;
}
.archive_item .priceBox {
    display: flex;
        align-items: center;
        flex-wrap: wrap;
        grid-gap: .3em .5em;
        justify-content: space-between;
    line-height: 1.2;
}
.archive_item .priceBox .small_lot {
    font-size: min(3vw, 12px);
}
.archive_item .priceBox .price {
    flex: auto;
    display: flex;
        justify-content: flex-end;
    font-size: min(3.3vw, 13px);
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}
.archive_item .priceBox .price_no {
    font-size: 1.3em;
}
.archive_item .linkBtn {
    font-size: .9em;
    min-height: 3em;
    width: 100%;
        min-width: 0;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
    .column_wrapper {
        display: grid;
            grid-gap: min(20vw, 60px);
            grid-template-columns: minmax(0, 1fr);
        
    }
    #archive_contents .column_wrapper {
        margin: auto;
        max-width: 500px;
    }
    /* #main_section {
        margin-top: min(12vw, 60px);
    } */
    #archive_contents #sidebar {
        grid-row: 2;
        width: 100%;
    }

    .archive_itemBox {
        grid-template-columns: 1fr;
        margin: auto;
        max-width: 500px;
    }
    .archive_item a {
        grid-gap: 8px 15px;
        grid-template-columns: min(40%, 140px) 1fr;
        grid-template-rows: 1fr auto;
    }
    .archive_item .imgBox {
        grid-row: 1 / 3;
    }
    .archive_item .btnBox {
        grid-column: 2;
        align-self: flex-end;
    }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 960px) {
    #archive_contents .column_wrapper {
        display: grid;
            grid-template-columns: minmax(0, 1fr) 260px;
    }
    #archive_contents #main_section {
        grid-column: 1;
        grid-row: 2;
    }
    #archive_contents #sidebar {
        grid-column: 2;
        grid-row: 1 / 3;
    }
    #archive_banner a {

    }
    .archive_itemBox {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ////////// tablet ////////// */
@media screen and (min-width:769px) and (max-width:960px) {
    #archive_contents .column_wrapper {
        display: grid;
            grid-gap: min(5vw, 60px)
    }
    #archive_contents #sidebar {
        grid-row: 2;
        width: 100%;
    }
    .archive_itemBox {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width:960px) and (max-width:1180px) {
    .archive_itemBox {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (hover: hover) {
    .archive_item a:hover {
        opacity: 1;
    }
    .archive_item a:hover .coverImg {
        transform: scale(1.05);
    }
    .archive_item a:hover .coverImg img {
        transform: none;
    }
}

#connected + #contactArea > .innerBox {
    padding-top: min(10vw, 70px);
}
#contactArea .contactArea-inner {
    padding-left: min(3vw, 30px);
    padding-right: min(3vw, 30px);
}