/* Screen-specific styles; shared layout and navigation are in product-listing.css. */
html, body {
    width: 100%;
    height: 100%;
    overflow: auto;
    margin: 0;
    padding: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
:root {
    --text-black: #151515;
}
.categories-container .pankuzu-list {
    display: flex; align-items: center; flex-wrap: wrap; width: 100%; margin-bottom: 24px;
}
.categories-container .pankuzu-unit {
    color: var(--text-black); font-family: "Noto Sans JP"; font-weight: 400; font-size: 12px; line-height: 150%;
}
.categories-container .pankuzu-unit a {
    color: var(--text-black); text-decoration: none;
}
.categories-container .pankuzu-separator {
    position: relative; width: 24px; height: 18px; flex-shrink: 0;
}
.categories-container .pankuzu-separator::after {
    position: absolute; content: ""; top: 0; left: 50%;
    width: 1px; height: 16px; background-color: var(--text-black); transform: rotate(30deg);
}
.categories-container h3 {
    font-family: "Noto Sans JP"; font-weight: 400; font-size: 16px; line-height: 160%; margin-top: 25px; margin-bottom: 0;
}
.categories-container h1 {
    font-family: "Noto Sans JP"; font-weight: 500; font-size: 40px; line-height: 160%; border-bottom: none; color: #151515; margin-top: 0;
}
#form_area .input-append {
    float: left;
}
#form_area .display-option {
    float: right; display: flex;
}
#form_area .number-disp-label {
    font-family: "Noto Sans JP"; font-weight: 400; font-size: 16px; line-height: 180%; color: #151515;
    position: relative; top: 2px; right: 12px; margin-left: 36px;
}
#form_area .select-wrapper {
    position: relative; width: 120px; display: inline-block;
}
#form_area select {
    width: 100%; height: 45px; border: solid 1px #AAAAAA; border-radius: 0;
    padding: 0 3em 0 0.9em; font-family: "Noto Sans JP"; font-weight: 400; font-size: 16px;
    line-height: 180%; color: #151515; -webkit-appearance: none; appearance: none;
}
#form_area .select-wrapper::after {
    content: ""; position: absolute; top: 15px; right: 18px;
    width: 8px; height: 8px; border-right: 2px solid #333; border-bottom: 2px solid #333;
    transform: rotate(45deg);
}
#count_parts, .count-parts {
    clear: both; font-family: "Noto Sans JP"; font-weight: 700; font-size: 24px;
    line-height: 180%; color: #151515; margin-bottom: 36px;
}
.input-append.product-search-area {
    width: 298px; height: 46px; background-color: #fff; border-radius: 50px;
    display: flex; gap: 8px; justify-content: center; align-items: center; padding: 0; margin: 0;
}
.product-search-form {
    background-color: #F2F2F2; height: 32px; width: 242px; border-radius: 999px;
    text-align: center; display: block;
}
.product-searchvbutton-image {
    height: 32px; width: 32px;
}
.product-searchvbutton-image img {
    width: 32px; height: 32px; object-fit: contain;
}
.product-search-button {
    cursor: pointer; border: none; background: none; padding: 0;
}
.mgnbtm30 {
    margin-bottom: 30px;
}
.display-option, .display-option-sub {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.main .products-section {
    width: 100%;
    max-width: 100%;
    background-color: #F3F8FC;
    padding: 65px 120px 80px;
    box-sizing: border-box;
}
.main .products-section .title-area {
    margin-bottom: 35px; display: flex; flex-direction: column; align-items: center; flex-wrap: nowrap; padding: 0 44px 20px; gap: 16px; text-align: center;
}
.main .products-section .title-area .section-title {
    font-family: "Noto Sans JP"; font-weight: 700; font-size: 32px; line-height: 100%; letter-spacing: 2px; border-bottom: none; color: #151515; padding: 0;
}
.main .products-section .list-area .card {
    padding: 16px 24px 32px; margin: 0; border-radius: 4px; background: #FFFFFF; width: 100%;
    min-width: 0; max-width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap;
    justify-content: flex-start; align-items: flex-start; gap: 24px; position: relative;
    cursor: pointer; text-decoration: none; color: inherit; box-sizing: border-box;
}
.main .products-section .list-area .card .name-area {
    display: flex; gap: 24px; flex-direction: row; flex-wrap: nowrap;
    justify-content: flex-start; align-items: center; width: 100%; min-width: 0;
}
.main .products-section .list-area .card .name-area img {
    width: 126px; height: 126px; max-width: 40%; object-fit: cover; border-radius: 4px; flex-shrink: 0;
}
.main .products-section .list-area .card .name-area .name {
    font-family: "Noto Sans JP"; font-weight: 700; font-size: 20px; line-height: 140%;
    letter-spacing: 0; color: #151515; min-width: 0; overflow-wrap: anywhere; word-break: break-word;
}
.main .products-section .list-area .card .description-area {
    font-family: "Noto Sans JP"; font-weight: 400; font-size: 16px; line-height: 180%;
    letter-spacing: 0; vertical-align: middle; color: #151515; width: 100%; min-width: 0;
    overflow-wrap: anywhere; word-break: break-word;
}
.main .products-section .list-area .card .dumy-area {
    height: 10px;
}
.main .products-section .list-area .card::after {
    content: url('/common/asset/products/button_view_info.svg');
    position: absolute; right: 24px; bottom: 16px; width: 34px; height: 20px; color: #151515;
}
.main .products-section .list-area a {
    text-decoration: none; color: inherit;
}
.filter-layout .products-section {
    width: 100%;
    max-width: 100%;
    padding: 0;
    background-color: transparent;
}
@media (min-width: 1025px) {
    .main .products-section .list-area .card .name-area .name {
        width: 60%;
    }
}
@media (max-width: 1024px) {
    .input-append.product-search-area {
        width: 100%; padding: 8px; margin-bottom: 24px;
    }
    .product-search-form {
        width: 100%;
    }
    .display-option, .display-option-sub {
        width: 100%; display: block;
    }
    #form_area .number-disp-label {
        margin: 0;
    }
    #form_area .select-wrapper {
        width: 80%; margin-bottom: 12px;
    }
    #form_area .display-option {
        display: block;
    }
}
@media (max-width: 768px) {
    .categories-container .pankuzu-list {
        width: auto;
    }
    .categories-container h1 {
        font-size: 32px;
    }
    .main .products-section .title-area {
        margin-bottom: 0;
    }
    .main .products-section .title-area .section-title {
        font-size: 24px; margin-top: 0;
    }
    .main .products-section .list-area .card {
        gap: 8px;
    }
    .main .products-section .list-area .card .name-area img {
        width: 88px; height: 88px; max-width: none;
    }
    .main .products-section .list-area .card .name-area .name {
        font-size: 18px;
    }
    .main .products-section .list-area .card .description-area {
        font-size: 16px;
    }
}