﻿
.pane-left-menu {
	display: block !important;
}
/* .filter-menu__continer {
	padding-top: 22px;
} */
.filter-menu__continer .filter-menu__menu {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.filter-menu__continer .filter-menu__menu-block {
	flex: 0 0 100%;
}
.filter-menu__continer .filter-menu__list {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	margin-bottom: 0;
}
.filter-menu__continer .filter-menu__list-item {
	/* flex: 0 0 100%; */
	padding: 6px .4rem;
	line-height: 22px;
	width: fit-content;
}
.filter-menu__continer .filter-menu__list-item + .filter-menu__list-item {
	margin-top: 5px;
}
.filter-menu__continer .filter-menu-modal .filter-menu__list-item {
	padding: 0;
}
.filter-menu__continer .filter-menu-modal .filter-menu__list-item + .filter-menu__list-item {
	margin-top: 0;
}
.filter-menu__continer .filter-menu__tile {
	display: grid;
	gap: 15px;
	grid-template-columns: 26px 26px 26px 26px 26px;
	margin-bottom: 45px;
	margin-top: 17px;
	width: 190px;
}
.filter-menu__continer .js-filter--store .filter-menu__list-item:nth-of-type(1) {
	display: none;
}
.filter-menu__menu--fix {
	margin-bottom: 50px;
	border-top: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
	padding: 20px 0;
}
.filter-menu__continer .filter-menu__menu-block + .filter-menu__menu-block {
	margin-top: 50px;
}
.filter-menu__continer .filter-menu__menu-block-label {
    border-bottom: 1px solid #E6E6E6;
    cursor: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
    font-size: 18px;
	font-weight: 700;
    font-family: var(--hiragino-w6-txt);
	justify-content: space-between;
	line-height: 1;
	margin-bottom: 15px;
    position: relative;
    padding: 0 0 16px;
}
.filter-menu__continer .filter-menu__menu-block-label > span {
	display: block;
}
.filter-menu__continer :checked ~ .filter-menu__list-item-label-text {
	text-decoration: underline;
}
.filter-menu__continer .filter-menu__menu-item-container {
	/* margin-bottom: 45px;
	margin-top: 17px; */
}
.filter-menu__continer .filter-menu__menu-item--range {
	align-items: center;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
}
.filter-menu__continer .filter-menu__range-input-container {
	flex: 0 0 84px;
}
.filter-menu__form input[type="checkbox"],
.filter-menu__form input[type="radio"] {
	display: none;
	vertical-align: top;
}
.filter-menu__form .filter-menu__range-input {
    background: #fff;
    border: 1px solid #B7B7B7;
    border-radius: 3px;
    box-sizing: border-box;
    color: #3C3C3C;
    cursor: pointer;
    font-size: 14px;
    padding: 8px 10px;
    transition: border-color 0.3s ease;
    width: 100%;
}
.filter-menu__form .filter-menu__range-input::placeholder {
	color: #B7B7B7;
}
.filter-menu__form .filter-menu__tile-item-image-container {
	aspect-ratio: 1 / 1;
	position: relative;
	width: 100%;
	height: 26px;
}
.filter-menu__form :checked + .filter-menu__tile-item-image-container::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	border: 2px solid #52A0D9;
	left: 0;
}
.filter-menu-modal {
    box-sizing: border-box;
    left: 0;
	right: 0;
	bottom: 0;
    overflow: auto;
	padding: 145px 70px 105px;
	position: fixed;
    top: 0;
    z-index: 10;
}
.filter-menu-modal__overray {
    box-sizing: border-box;
    left: 0;
	right: 0;
    background: rgba(0, 0, 0, 50%);
	bottom: 0;
    overflow: auto;
	position: fixed;
    top: 0;
    z-index: 50;
}
.filter-menu-modal__content {
    background: #fff;
    display: block;
    height: 508px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    position: relative;
    width: 1140px;
	z-index: 100;
}
.filter-menu-modal .detailSelector {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.filter-menu-modal .detail-selector__index {
	flex: 0 0 fit-content;
}
.filter-menu-modal .detail-selector__body {
	background: #eee;
    padding-top: 15px;
    padding-bottom: 34px;;
	flex: 1 1 64%;
	position: relative;
}
.filter-menu-modal .detail-selector__body .filter-menu__list {
	overflow-y: auto;
	max-height: 398px;
}
.filter-menu-modal .detail-selector__body .filter-menu__list {
	width: 50%;
}
.filter-menu-modal .detail-selector__body .filter-menu__list::-webkit-scrollbar {
    width: 15px;
}
.filter-menu-modal .detail-selector__body .filter-menu__list::-webkit-scrollbar-track {
    background-image: linear-gradient(90deg, #EDEDED 43.33%, #fff 43.33%, #fff 56.67%, #EDEDED 56.67%, #EDEDED);
}
.filter-menu-modal .detail-selector__body .filter-menu__list::-webkit-scrollbar-thumb {
    width: 5px;
    background-image: linear-gradient(90deg, #EDEDED 33.33%, #B7B7B7 33.33%, #B7B7B7 66.67%, #EDEDED 66.67%, #EDEDED);
}

.filter-menu-modal .detail-selector__body .filter-menu__list.filter-menu__accordion--body {
	position: absolute;
	left: 50%;
	top: 15px;
}
.filter-menu-modal.filter-menu-modal.filter-menu-modal--search .filter-menu__menu-block-label:not(.filter-menu--disp-modal-only),
.filter-menu-modal.filter-menu-modal.filter-menu-modal--search .filter-menu__menu-block,
.filter-menu-modal .filter-menu__accordion--body {
	display: none;
}
.filter-menu-modal.filter-menu-modal.filter-menu-modal--search .filter-menu__menu-block-label.filter-menu--disp-modal-only {
	padding: 14px 0 0 40px;
	line-height: 1;
	border-bottom: 0;
	font-size: 16px;
	font-weight: 700;
}
.filter-menu-modal :not(.filter-menu__menu-block--color) > * > .filter-menu__list-item .filter-menu__list-item-label-text{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
    align-items: center;
    width: 365px;
    height: 44px;
    padding-left: 40px;
	padding-right: 40px;
    background: #F7F7F7;
    font-size: 14px;
    color: #3C3C3C;
    cursor: pointer;
}
.filter-menu-modal .filter-menu__accordion--title-label > span {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
    align-items: center;
    width: 365px;
    height: 44px;
    padding-left: 40px;
	padding-right: 40px;
    color: #3C3C3C;
    cursor: pointer;
}

.filter-menu-modal .filter-menu__accordion--title-label:has(:checked) > span {
    color: #fff;
    background: #8D8D8D;
    text-decoration: none;
}
.filter-menu-modal.filter-menu-modal--brand .filter-menu__accordion--title > label,
.filter-menu-modal.filter-menu-modal--item .filter-menu__accordion--title > label {
	background: #fff;
}
.filter-menu-modal .filter-menu__list-item :checked + .filter-menu__list-item-label-text,
.filter-menu-modal .filter-menu__accordion--title > label:has(:checked) {
    color: #fff;
    background: #8D8D8D;
    text-decoration: none;
}
.filter-menu-modal.filter-menu-modal--brand .filter-menu__accordion--title > label:has(:checked),
.filter-menu-modal.filter-menu-modal--item .filter-menu__accordion--title > label:has(:checked) {
    background: #3C3C3C;
}
.filter-menu-modal .filter-menu__tile {
	display: grid;
	gap: 15px 23px;
	grid-template-columns: 40px 40px 40px 40px 40px;
	margin-bottom: 45px;
	margin-top: 17px;
	padding-left: 40px;
	width: 50%;
}
.filter-menu-modal .filter-menu__menu-block--color::before {
    content: 'カラーで絞り込む';
    display: block;
    width: 100%;
    margin-bottom: 17px;
	padding-left: 40px;
}
.filter-menu-modal .filter-menu__menu-block--price::before {
    content: '価格で絞り込む';
    display: block;
    width: 100%;
    margin-bottom: 17px;
	padding-left: 40px;
}
.filter-menu-modal .filter-menu__menu-item--range {
	align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
	padding-left: 40px;
	padding-right: 60px;
	width: 50%;
}
.filter-menu-modal .filter-menu__range-input-container {
	flex: 0 0 120px;
}
.filter-menu-modal .filter-menu__tile-item-image-container,
.filter-menu-modal .filter-menu__tile-item-image-container img {
	height: 40px;
	width: 40px;
}
.filter-menu-modal .filter-menu--disp-menu-only {
	display: none !important;
}
.filter-menu__continer .filter-menu--disp-modal-only {
	display: none !important;
}
.detail-selector__heading {
	flex: 0 0 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
    padding: 15px 25px 15px 40px;
    border-bottom: 1px solid #B7B7B7;
}
.detail-selector__heading-text {
	padding: 0;
	margin: 0;
	border: 0;
}
.filter-menu-modal__close-btn {
	display: inline-block;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 30px;
    margin-right: 15px;
    cursor: pointer;
    border: 1px solid #3C3C3C;
    color: inherit;
    font-weight: normal;
    background: #fff;
}
.filter-menu-modal__search-btn {
	display: inline-block;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 30px;
    cursor: pointer;
    color: #fff;
    background: #3C3C3C;
    border: 0;
}
.detail-selector__index-selected {
	padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 23px;
}
.detail-selector__selected-label {
    align-items: center;
    border-bottom: 0 none;
    cursor: pointer;
	display: flex;
    justify-content: space-between;
    width: 365px;
    min-height: 44px;
    padding-left: 40px;
    padding-right: 44px;
}
:checked ~ .detail-selector__selected-label {
	background: #3C3C3C;
	color: #fff;
}
.detail-selector__selected-label--body {
	width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #B7B7B7;
    font-size: 12px;
    text-align: right;
}
:checked ~ .detail-selector__selected-label--body{
    color: #B7B7B7;
}
.filter-menu__form-clear-btn {
    width: 100%;
    padding-left: 40px;
    padding-top: 17px;
    padding-bottom: 18px;
    border: 0 none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
	border-top: 1px solid #B7B7B7;
	color: #8d8d8d;
}
.filter-menu__range-input {
	text-align: right;
}
.filter-menu__range-input-container {
	position: relative;
}
.filter-menu__range-input-container:before {
	content: "￥";
	position: absolute;
	left: 8px;
	top: 1px;
	height: 37px;
	line-height: 37px;
	color: #B7B7B7;
}
.filter-menu-modal.filter-menu-modal--item .detail-selector__body .filter-menu__menu-block,
.filter-menu-modal.filter-menu-modal--brand .detail-selector__body .filter-menu__menu-block {
	display: block;
}
.filter-menu-modal.filter-menu-modal--item .filter-menu-modal__content,
.filter-menu-modal.filter-menu-modal--brand .filter-menu-modal__content {
    width: 760px;
    height: 550px;
}
.filter-menu-modal.filter-menu-modal--item .detail-selector__body,
.filter-menu-modal.filter-menu-modal--brand .detail-selector__body {
	background: #fff;
    padding-top: 15px;
	padding-bottom: 0;
	flex: 0 0 50%;
	height: 489px;
    padding-top: 15px;
    overflow: hidden;
	position: relative;
}
.filter-menu-modal.filter-menu-modal--item .detail-selector__body,
.filter-menu-modal.filter-menu-modal--brand .detail-selector__body {
	background: #eee;
    padding-top: 15px;
	padding-bottom: 0;
	flex: 0 0 100%;
}
.filter-menu-modal.filter-menu-modal--item .detail-selector__body .filter-menu__list,
.filter-menu-modal.filter-menu-modal--brand .detail-selector__body .filter-menu__list {
	max-height: 474px;
}
.filter-menu__menu-item-button {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	line-height: 24px;
	padding: 5px .6rem 5px .4rem;
	height: 34px;
	width: fit-content;
}
.filter-menu__menu-item-button::after {
	content: '';
	width: 1em;
	height: 1em;
	margin-left: .4em;
	border-top: 2px solid #3c3c3c;
	border-right: 2px solid #3c3c3c;
	transform-origin: center center;
	transform: rotate(45deg) scale(.5) translate(12px, 0);
}
.filter-menu-modal .filter-menu__menu-item--range {
	width: 362px !important;
}
.filter-menu-modal .filter-menu__range-separator {
	margin: 0 14px;
}
.filter-menu-modal .filter-menu__form .filter-menu__range-input {
	width: 160px;
}
.pane-left-menu .filter-menu__continer :checked ~ .filter-menu__list-item-label-text {
    text-decoration: none;
    color: #fff;
}
.pane-left-menu .filter-menu__list-item:has(:checked) {
    background: #444;
}
.pane-left-menu .filter-menu__menu-item-button:hover,
.pane-left-menu .filter-menu__list-item:hover {
    outline: 1px solid #444
}

