@charset "utf-8";
/* CSS Document */

/* ================================================================= */
/* オープン表示モード  */
/* ================================================================= */
.responsive .sort_outside {
    flex-wrap: wrap;
    justify-content: space-between;
}

.responsive:not(.ocnk023) .sort_outside {
    padding: 5px 10px;
}

@media screen and (min-width: 840px) {
    .responsive:not(.ocnk023) .sort_outside {
        padding: 0;
    }

    .responsive:not(.ocnk023) .sort_outside:not(:has(.sort_toggle)) {
        padding: 5px 0;
    }
}


/* ================================================================= */
/* 写真/説明付き表示形式枠 */
/* ================================================================= */
.responsive .sort_outside .upper_sort_area {
    width: 75px;
}


/* ================================================================= */
/* 在庫あり */
/* ================================================================= */
.responsive .sort_outside .sort_box.sort_stock {
    margin-left: 3px;
}
.responsive .sort_outside .sort_box.sort_stock .check_label {
    display: flex;
    align-items: center;
}
.responsive .sort_outside .sort_box.sort_stock :is(.check_label,input,.only_available_label) {
    line-height: normal;
}

/* チェックボックス */
.responsive .sort_outside .sort_box.sort_stock input[type=checkbox] {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    margin-right: 8px;
}


/* ================================================================= */
/* 商品絞込み枠横幅 */
/* ================================================================= */
.responsive .sort_outside .sort_toggle,
.ocnk023.responsive .sort_outside .sort_toggle {
    width: auto;
    min-width: auto;
}


/* ================================================================= */
/* 表示数/在庫/並び順　大枠 */
/* ================================================================= */
.responsive .sort_outside .sort_display {
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0;
    background-color: transparent;
    border: none;
    font-size: 14px;
}

@media screen and (min-width: 840px) {
    .responsive .sort_outside .sort_display {
        flex: 1;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        order: unset;
        margin: 0;
        padding: 0 10px;
        border: none;
        background-color: transparent;
    }

    .responsive .sort_outside:not(:has(.sort_toggle)) .sort_display {
        justify-content: flex-end;
    }
}

@media screen and (min-width: 1200px) {
    .responsive .sort_outside .sort_display {
        gap: 20px;
    }
}


/* ================================================================= */
/* 表示数/在庫/並び順　各枠 */
/* ================================================================= */
.responsive .sort_outside .sort_box {
    position: relative;
    border-bottom: none;
    padding: 0;
    margin: 0;
}


/* ================================================================= */
/* 表示数/並び順ボタン枠  */
/* ================================================================= */
/* 各ドロップダウン枠 */
.responsive .sort_outside .sort_select {
    padding: 0 5px;
    font-size: 14px;
    position: relative;
    @media (hover: hover) {
        &:hover {
            background-color: #F5F5F5;
        }
    }
}

/* ================================================================= */
/* 表示数/並び順ボタン labelタグ  */
/* ================================================================= */
.responsive .sort_outside .sort_select_button {
    display: flex;
    align-items: center;
    cursor: pointer;
    line-height: normal;
}

/* アイコン ※buttonにafterで指定 */
.responsive .sort_outside .sort_select_button::after {
    content: "\f107";
    display: inline-block;
    margin-left: 5px;
    font: normal bold normal 16px / 1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ================================================================= */
/* 表示数/並び順ボタン　ドロップダウン中身  */
/* ================================================================= */
/* sp:下部フルスクリーン */
.responsive .sort_outside .sort_option_wrapper {
    width: 100%;
    padding: 10px 10px 20px;
    position: fixed;
    z-index: 1001;
    left: 0;
    bottom: -100%;
    box-sizing: border-box;
    background-color: #FFFFFF;
    box-shadow: 0 0 15px #0000001A;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    text-align: center;
    display: none;
}


/* pc:ドロップダウン幅固定 */
@media screen and (min-width: 840px) {
    .responsive .sort_outside .sort_option_wrapper {
        position: absolute;
        top: 30px;
        left: 0;
        bottom: auto;
        width: 200px;
        border: 1px solid #E0DFE3;
        border-radius: 5px;
        padding: 10px;
        z-index: 99;
    }

    /* クリックでblock */
    .responsive .sort_outside .sort_box.opened .sort_option_wrapper {
        display: block;
    }

}


@media screen and (max-width: 840px) {
    .responsive .sort_outside .sort_box.opened .sort_option_wrapper,
    .responsive .sort_outside .sort_box:not(.opened) .sort_option_wrapper.opened {
        display: block;
        animation-duration: .5s;
        animation-timing-function: cubic-bezier(.4,.4,0,1);
        animation-fill-mode: forwards;
    }

    .responsive .sort_outside .sort_box.opened .sort_option_wrapper {
        animation-name: sortOpen;
    }

    .responsive .sort_outside .sort_box:not(.opened) .sort_option_wrapper.opened {
        animation-name: sortClose;
    }
}


/* ================================================================= */
/* 表示数/並び順ボタン　ドロップダウン各選択肢  */
/* ================================================================= */
.responsive .sort_outside .sort_select .sort_option {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    margin: 1px 0;
    cursor: pointer;
    font-size: 14px;
    line-height: normal;
    color: #000;
    /* マウスオーバー */
    @media (hover: hover) {
        &:hover {
            text-decoration: none;
            background-color: #F5F5F5;
        }
    }
    /* 選択中 */
    &.selected {
        text-decoration: none;
        background-color: #F9F9F9;
    }
}


/* ================================================================= */
/* 商品絞込みボタン　下部配置/絞込みコンテンツフルスクリーン表示  */
/* ================================================================= */

@media screen and (max-width: 840px) {

    /* 絞込みボタン枠 */
    .responsive .sort_outside .sort_toggle {
        position: fixed;
        bottom: 10px;
        right: 10px;
        z-index: 99;
        transition: .3s;
    }

    /* Pagetopボタン表示の際は位置上に */
    .responsive:has(.fixed_corner_visible) .sort_outside .sort_toggle {
        bottom: 90px;
        transition: .3s;
    }

    /* 絞込みボタン */
    .responsive .sort_outside .sort_toggle .toggle_open {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 70px;
        height: 70px;
        border-radius: 70px;
        padding: 5px;
        box-sizing: border-box;
        border: none;
        box-shadow: 0 0 15px #0000001A;
        background-image: none;
        font-size: 10px;
        font-weight: 500;
        color: #FFF;
        text-align: center;
    }

    /* アイコン */
    .responsive .sort.sort_outside .sort_toggle .toggle_open i {
        margin-bottom: 5px;
        font-size: 18px;
        color: #FFF;
    }

    /* 絞込みコンテンツ大枠 */
    .responsive:has(.sort_outside) .sort_item {
        overflow-y: auto;
        overscroll-behavior: none;
        position: fixed;
        opacity: 0;
    }

    /* 絞込みコンテンツ枠内　閉じるボタン右上配置 */
    .custom_toggle_area .link_close_toggle_box {
        width: 25px;
        height: 25px;
        bottom: auto;
        top: 10px;
        right: 10px;
        text-indent: -9999px;
    }

    .custom_toggle_area .link_close_toggle_box::after {
        content: "\e92d";
        position: absolute;
        top: 0;
        right: 0;
        display: inline-block;
        font-family: ocnkiconf !important;
        speak: never;
        font-style: normal;
        font-weight: 700;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;

        background-color: #F0F0F0;
        width: 25px;
        height: 25px;
        border-radius: 25px;
        text-align: center;
        line-height: 25px;
        text-indent: 0;
        color: #000;
    }

    /* animation */
    .responsive:has(.sort_outside) .sort_item {
        animation-duration: .5s;
        animation-timing-function: cubic-bezier(.4,.4,0,1);
        animation-fill-mode: forwards;
    }

    /* animation:sortOpen */
    .responsive:has(.sort_outside) .toggle_opened .sort_item {
        width: 100%;
        height: 100dvh;
        bottom: 0;
        left: 0;
        z-index: 99;
        background-color: #FFF;
        padding-top: 30px;
        opacity: 1;
        animation-name: sortOpen;
    }

    /* animation:sortClose */
    .responsive:has(.sort_outside) .toggle_closed .sort_item {
        bottom: -100%;
        animation-name: sortClose;
    }

    @keyframes sortOpen {
        0%{
            bottom: -100%;
        }
        100%{
            bottom: 0;;
        }
    }

    @keyframes sortClose {
        0%{
            bottom: 0;
        }
        100%{
            bottom: -100%;
        }
    }
}

.responsive .sort_outside .item_count {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    padding: 0;
}

@media screen and (max-width: 380px) {
    .responsive:not(.ocnk023):is(.touch008) .sort_outside {
        padding: 5px;
    }

    .responsive .sort_outside .sort_display {
        gap: 5px;
    }
}

@media screen and (max-width: 350px) {
    .responsive .sort_outside .upper_sort_area {
        width: 65px;
        min-width: 65px;
    }

    .responsive .sort_outside .upper_sort_area img {
        width: 20px;
        height: auto;
    }

    .responsive:not(.ocnk023) .sort_outside {
        padding: 5px;
    }

    .responsive .sort_outside .sort_display,
    .responsive .sort_outside .sort_select {
        font-size: 12px;
    }
}


/* template */
@media screen and (max-width: 840px) {
    .touch001.responsive #container .sort_outside .sort_toggle .toggle_open {
        background-color: #0166FF;
    }
    .touch002.responsive #container .sort_outside .sort_toggle .toggle_open {
        background-color: #FF8000;
    }
    .touch003.responsive #container .sort_outside .sort_toggle .toggle_open {
        background-color: #1E8AD3;
    }
    :is(.touch005,.touch013).responsive #container .sort_outside .sort_toggle .toggle_open {
        background-color: #F5F5F5;
        color: #000;
        .fa {
            color: #000;
        }
    }
    .touch006.responsive #container .sort_outside .sort_toggle .toggle_open {
        background-color: #A69D80;
    }
    .touch007.responsive #container .sort_outside .sort_toggle .toggle_open {
        background-color: #6A0B38;
    }
    .touch008.responsive #container .sort_outside .sort_toggle .toggle_open {
        background-color: #666;
    }
    .touch009.responsive #container .sort_outside .sort_toggle .toggle_open {
        background-color: #007D20;
    }
    .touch010.responsive #container .sort_outside .sort_toggle .toggle_open {
        background-color: #971051;
    }
    .touch017.responsive #container .sort_outside .sort_toggle .toggle_open {
        background-color: #4C1F10;
    }
    .touch018.responsive #container .sort_outside .sort_toggle .toggle_open {
        background-color: #212529;
    }
    .touch021.responsive #container .sort_outside .sort_toggle .toggle_open {
        background-color: #A3DAF6;
    }
    .touch022.responsive #container .sort_outside .sort_toggle .toggle_open {
        background-color: #D9D1CD;
        color: #000;
        .fa {
            color: #000;
        }
    }
    :is(.touch004,.touch011,.touch020,.touch023,.touch024,.touch026,.touch027,.touch029,.touch030,.touch031,.touch032,.touch_modern).responsive #container .sort_outside .sort_toggle .toggle_open {
        background-color: #000;
    }
    :is(.touch014,.touch015,.touch016,.touch019,.touch038).responsive #container .sort_outside .sort_toggle .toggle_open {
        background-color: #333;
    }
    .touch025.responsive #container .sort_outside .sort_toggle .toggle_open {
        background-color: #59493F;
    }
    :is(.touch012,.touch028,.touch036).responsive #container .sort_outside .sort_toggle .toggle_open {
        background-color: #555;
    }
}