/* --------------------
 Equipment
-------------------- */
.com-page-head:before {
    background-image: url(../images/pages/equipment/equipment-page-head.webp);
}

.item-wrapper {
    margin: 0 0 32vw;
    padding: 16vw 0 0;
}

@media (min-width: 768px) {
    .item-wrapper {
        margin: 0 0 200px;
        padding: 150px 0 0;
    }
}

.item {
    margin: 0 auto 21.3333333333vw;
    max-width: calc(var(--container-width) + var(--c-pad)*2);
    padding: 0 var(--c-pad);
    width: 100%;
}

@media (min-width: 768px) {
    .item {
        margin: 0 auto 160px;
    }
}

.item:last-child {
    margin-bottom: 0;
}

.item__title {
    color: var(--color-burnt-orange);
    font-size: 4.784vw;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 10.6666666667vw;
    text-align: center;
}

@media (min-width: 768px) {
    .item__title {
        font-size: var(--fs23);
        margin: 0 0 45px;
    }
}

.item__gallery {
    align-items: stretch;
    display: flex;
    flex-flow: row wrap;
    gap: 10.6666666667vw 8vw;
    justify-content: flex-start;
    margin: 0 0 16vw;
}

@media (min-width: 768px) {
    .item__gallery {
        gap: 60px 30px;
        margin: 0 0 85px;
    }
}

@media (min-width: 992px) {
    .item__gallery {
        gap: 60px 75px;
    }
}

.item__gallery__item {
    flex: 0 0 100%;
}

@media (min-width: 768px) {
    .item__gallery__item {
        flex: 0 0 calc(33.33333% - 20px);
    }
}

@media (min-width: 992px) {
    .item__gallery__item {
        flex: 0 0 calc(33.33333% - 50px);
    }
}

.item__gallery__item__fig {
    border-radius: 4.2666666667vw;
    margin: 0 0 5.3333333333vw;
    overflow: hidden;
}

@media (min-width: 768px) {
    .item__gallery__item__fig {
        border-radius: 20px;
        margin: 0 0 20px;
    }
}

.item__gallery__item__fig img {
    aspect-ratio: 700/500;
    height: auto;
    object-fit: cover;
    object-position: center;
    transition: transform var(--duration) var(--cubic) 0s;
    width: 100%;
}

.item__gallery__item__title {
    font-size: 3.744vw;
    letter-spacing: 0.05em;
    line-height: 1.6;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .item__gallery__item__title {
        font-size: var(--fs18);
    }
}

@media (max-width: 767px) {
    .item__table .os-scrollbar {
        --os-size: 2.6666666667vw;
    }
}

@media (max-width: 767px) {
    .item__table__bar {
        height: 4.2666666667vw;
        overflow-x: auto;
        white-space: nowrap;
    }
}

@media (min-width: 768px) {
    .item__table__bar {
        display: none;
    }
}

.item__table__bar__filler {
    height: 4.2666666667vw;
    width: 0;
}

@media (max-width: 767px) {
    .item__table-scroller {
        overflow-x: auto;
        padding: 0 0 3.2vw;
        white-space: nowrap;
    }
}

.item__table {
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    width: 100%;
}

.item__table > thead > tr > th, .item__table > thead > tr > td {
    background-color: var(--color-navy-blue);
    color: var(--color-white);
    font-size: 3.7333333333vw;
    font-weight: 700;
    line-height: 1.4;
    padding: 3.2vw;
    text-align: left;
    vertical-align: middle;
}

@media (min-width: 768px) {
    .item__table > thead > tr > th, .item__table > thead > tr > td {
        font-size: var(--fs16);
        padding: 20px;
    }
}

.item__table > tbody > tr > th, .item__table > tbody > tr > td {
    background-color: #F2F3F1;
    border-bottom: 0.2666666667vw solid var(--color-navy-blue);
    font-size: 3.7333333333vw;
    line-height: 1.4;
    padding: 3.2vw;
    text-align: left;
    vertical-align: middle;
}

@media (min-width: 768px) {
    .item__table > tbody > tr > th, .item__table > tbody > tr > td {
        border-bottom-width: 1px;
        font-size: var(--fs16);
        padding: 20px;
    }
}

.item__table > tbody > tr > th {
    font-weight: 400;
}

@media (min-width: 768px) {
    .item__table--2cols {
        table-layout: fixed;
    }
}

@media (min-width: 768px) {
    .item__table--2cols > thead > tr > th, .item__table--2cols > thead > tr > td {
        width: 50%;
    }
}

.item__table--5cols > thead > tr > th:last-child, .item__table--5cols > thead > tr > td:last-child {
    width: 110px;
}