@charset "UTF-8";
    /* --- 共通スタイル --- */
    .rc {
        display: flex;
        flex-wrap: wrap;
        gap: 20px 0;
    }
    
    .col-6 {
        width: 48%;
        padding: 0;
        box-sizing: border-box;
    }
	.productImg.rc .col-6:nth-of-type(1) {
		display:grid;
		gap:1rem;
	}

    table {
        width: 100%;
        border-collapse: collapse;
        box-sizing: border-box;
        margin-left: auto;
        font-size: 14px;
    }
	
    #modal-product-content table:nth-of-type(1) {
		grid-area: 2 / 1 / 4 / 2; 
	}
    #modal-product-content table:nth-of-type(2) {
		grid-area: 2 / 2 / 3 / 3;
	}
    #modal-product-content table:nth-of-type(3) {
		grid-area: 3 / 2 / 4 / 3;
	}

    table tr {
        display: flex;
    }
    table tr:nth-of-type(1){
		flex-wrap:wrap;
	}

    table th {
        padding: 1.5rem 0 1.5rem 1.5rem;
        vertical-align: middle;
        text-align: left;
        width: 30%;
		font-weight:normal;
        border-bottom: 1px solid #cbd5e1;
        display: flex;
        align-items: center;
	}
	table tr:nth-of-type(1) th:nth-of-type(1) {
		font-weight:600;
		width:100%;
    }
    
    table th.main {
        
    }

    table td {
        background: #fff;
        padding: 1.5rem;
        text-align: left;
        word-break: keep-all;
        box-sizing: border-box !important;
        border-bottom: 1px solid #cbd5e1;
		flex:1;
    }

    .mt-20 { margin-top: 20px; }
    .mb-20 { margin-bottom: 20px; }
    
    /* カラーボックス (モーダル内) */
    .colorbox {
        margin-bottom: 15px;
        font-weight: bold;
        text-align: left; 
        padding-bottom: 10px;
		margin-right:5px;
    }
    .colorwrap {
        display: flex;
        justify-content: flex-start; 
        gap: 10px;
        margin-top: 10px; 
    }
    .colorW, .colorB {
        display: inline-block;
/*
        border: 2px solid #ccc; 
        border-radius: 20px; 
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
*/
		cursor: default; 
    }
    .colorB { 
        color: #333; 
    }
    .colorW { 
    }
    /* --- モーダル内のカラー表示 省スペース化 修正案 --- */

/* カラーボックス全体（親要素） */
.modal-body .colorbox {
    /* 1. 上下マージンの削減 */
    margin-bottom: 10px; /* 15px から 10px に削減 */
    padding-bottom: 5px; /* 10px から 5px に削減 */
	margin-left:5px;
	order:5;
	margin-top:2rem;
    
    /* 2. テキストとカラーチップを左右に配置（テキストは左、チップは右） */
    display: flex;
    align-items: center; /* 垂直方向の中央揃え */
    font-size: 14px; /* フォントサイズを調整 */
	gap:2rem;
}

/* カラーチップのラッピング要素 */
.modal-body .colorwrap {
    /* 3. マージンを削除し、親要素の高さに合わせる */
    margin-top: 0;
}

/* 個別のカラーチップ */
.modal-body .colorW, 
.modal-body .colorB {
    font-size: 16px;
}
    
  /* ---------------------------------------------------- */
/* モーダル内のリスト（セット内容）の省スペース化 */
/* ---------------------------------------------------- */

/* hd4（セット内容タイトル）: 下マージンを詰める */
.hd4 {
    margin: 0 0 8px; /* 15px -> 8px に削減 */
    color: #333;
    font-weight: 600;
	font-size:1.6rem;
    background: #f8fafc;
    padding:0 1.5rem;
	line-height:56px;
}

/* ul.set（リスト全体）: パディングと背景、リストスタイルを削除 */
ul.set {
    background: none; /* 背景色を削除 */
    padding: 0;      /* パディングを削除（インデントをなくす） */
    margin-bottom: 10px; /* 15px -> 10px に削減 */
    list-style: none; /* リストマーカーを削除 */
    list-style-position: outside; /* outsideに戻すか、noneで統一 */
}

/* ul.set li（リスト項目）: 上下パディングを削除し、ラインの高さを詰める */
ul.set li {
    padding: 1px 0; /* 上下パディングを最小限に削減 */
    line-height: 1.6; /* 行間を調整 */
    position: relative;
    font-size: 16px;
    margin-left: 20px; /* 箇条書き風にするためのスペース */
}

/* ★追加: 新しいリストマーカー（例: 緑のドット）を擬似要素で作成し、位置を調整 */
ul.set li::before {
    content: "●"; /* マーカーの形状を変更 */
    color: #66c297; /* BCPOSの緑色を使用 */
    font-size: 8px;
    position: absolute;
    left: -15px; /* li の margin-left に合わせて左に配置 */
    top: 50%;
    transform: translateY(-50%);
}

.modal-body .small {
    font-size: 12px;
    line-height: 1.2; 
    display: inline-block; 
    margin-top: 5px;
	margin-left:5px;
}
    /* --- 検索機能専用のスタイル --- */
    .hardware-search-section {
        max-width: 1010px;
        margin: 0 auto 8rem;
        padding: 0;
    }

    .search-container {
        display: flex;
        flex-direction: column; 
        gap: 30px;
        align-items: stretch; 
    }

    .search-sidebar {
        flex: 0 0 auto; 
        width: 100%; 
		/*
        padding: 20px; 
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
		*/
        position: static; 
        top: auto;
    }

    /* ヘッダーエリア */
    .sidebar-header {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
		position:relative;
    }

    .sidebar-title {
		padding:1rem;
		background:#f8fafc;
        font-size: 18px;
        font-weight: 600;
        color: #009965;
        white-space: nowrap;
		transition: transform 0.3s;
		cursor:pointer;
		position:relative;
		width:100%;
		text-align:center;
    }
    .sidebar-title:hover {
            transform: translateY(-4px);
			opacity:0.7;
	box-shadow:  3px 4px 4px 2px rgba(0, 0, 0, 0.1);

}

.sidebar-title::after {
	content:"\f068";
	font-family:Font Awesome\ 5 Free;
	font-weight:600;	
	right: 20px;
	bottom: 1.5rem;
	font-size: 20px;
	position:absolute;
	width:18px;
	height:18px;
	text-align:center;
	line-height: 18px;
	color:#4db885;
}
.sidebar-title.close::after {
	content:"\2b";
	font-size:30px;
}

    #clear-all-btn {
        font-size: 12px;
        color: #475569;
        background: #fff;
		border:1px solid #94a388;
        border-radius: 24px;
		line-height:22px;
        cursor: pointer;
        white-space: nowrap;
        margin: 0 auto;
		width:80px;
		height:24px;
    }

    #clear-all-btn:hover {
        background: #ddd;
        color: #333;
    }

    /* 選択中タグ表示エリア */
    .active-tags-area {
        min-height: 20px;
		margin-top:15px;
        display: flex;
		flex-direction:column;
        gap: 10px;
    }

    .active-tag {
        font-size: 12px;
        background: #e6f5ee;
        color: #009965;
        padding: 5px 10px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        cursor: pointer; 
    }
    
    .active-tag::after {
        content: '×';
        margin-left: 10px;
        font-size: 10px;
		line-height:12px;
        cursor: pointer;
    }

    /* ---------------------------------------------------- */
    /* ★再設計: フィルターグループの横並び配置 (メイン構造) */
    /* ---------------------------------------------------- */
    .filter-groups-main {
        display: grid;
        /*grid-template-columns: repeat(6, 1fr);*/
		grid-template-columns: max-content max-content max-content max-content minmax(160px, 200px) max-content;
		padding: 3rem;
		min-height:217px;
		background:#fff;
		transition: transform 0.3s;

}



    .filter-section {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
		padding-right:3rem;
    }
    .filter-section:last-of-type {
	        border-left: 2px solid #eee;
			padding-left: 3rem;
			padding-right:0;
	}

    
    /* 大タイトル (h3) - 統一して高さを詰める */
    .filter-main-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 3px; /* 限界まで詰める */
        padding-top: 0; 
        display: flex;
        align-items: center;
		cursor:pointer;
    }
    .filter-main-title::before {
        content: '';
        display: block;
        width: 4px;
        height: 20px;
        background: #4db885;
        margin-right: 10px;
        border-radius: 2px;
    }

    /* 小タイトルはHTMLから削除 or 非表示 */
    .filter-sub-title {
        display: none; 
    }
    
    /* ---------------------------------------------------- */
    /* ★再設計: 選択肢のレイアウト - 均等グリッド化による省スペース化 */
    /* ---------------------------------------------------- */
    .filter-options {
        display: grid;
        grid-template-columns: repeat(1, 1fr); 
        gap: 10px; 
        padding-left: 0; 
        margin-top: 15px; 
    }

    
    /* フィルターラベル */
    .filter-label {
        display: flex;
        align-items: flex-start;
        cursor: pointer;
        font-size: 14px; 
        color: #555;
        line-height: 1.2; 
        margin-bottom: 0; 
        white-space: normal; 
    }
    
    /* チェックボックス */
    .filter-input {
        margin-right: 4px; 
        accent-color: #00863C;
        flex-shrink: 0;
        transform: scale(1.1); 
        margin-left: 2px;
        margin-top: 1px;
    }

    .filter-label-text {
        display: inline-block;
    }

    .filter-label.full-width {
        width: 100%;
    }
    
    .filter-label.disabled {
        opacity: 0.5;
        cursor: not-allowed;
        color: #aaa;
    }

    .filter-label:not(.disabled):hover {
        color: #00863C;
    }
    
    /* 右側：検索結果（今は下側） */
    .search-results {
        flex: 1;
        min-width: 0;
        width: 100%; 
    }

    .results-header {
        margin: 0 auto 4rem;
		text-align:center;
    }

    /* おすすめ商品タイトル */
    .recommend-title {
        font-size: 18px;
        font-weight: 600;
        color: #009965;
	margin-bottom:1rem;
    }

    .results-count {
        font-size: 16px;
        color: #666;
        margin-left: auto;
    }

    .results-count b {
        font-size: 32px;
        color: #009965;
		font-weight:bold;
        margin: 0 4px;
    }

    .product-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 50px 20px;
    }

    /* 商品カードスタイル */
    .posbox {
        background: #fff;
        border-radius: 8px;
/*
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
	*/
        transition: transform 0.2s, box-shadow 0.2s;
        margin-bottom: 0 !important;
        height: 100%;
        display: flex;
        flex-direction: column; 
        position: relative;
        cursor: pointer;
    }

    .posbox:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .posbox article.subContent {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    /* subInner (画像エリア) */
    .posbox .subInner {
        padding: 4rem 1rem 0; 
        flex-shrink: 0; 
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative; 
    }

    /* ProductTitle (テキストエリア) - 修正後のスタイル */
    .ProductTitle {
        padding: 2rem 1.5rem 6rem; 
        background: #f8fafc;
        border-bottom: none;
		border-radius: 0 0 8px 8px;
        flex-shrink: 0; 
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* ボタンを下に固定するため上寄せに */
        height: auto;
		position:relative;
		gap:1rem;
		flex-grow:1;
    }

    .productName {
        font-size: 17px;
        font-weight: 600;
        color: #000;
        display: block;
        line-height: 1.4;
    }

    .titlePrice {
        font-size: 36px;
        color: #F2435E;
        font-weight: bold;
			display: grid;
        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: max-content;
        grid-column-gap: 5px;
        grid-row-gap: 2px;

    }
    .price-yen {
	grid-area: 1 / 1 / 3 / 2;
	}
	
    
    .price-note {
        font-size: 12px;
        color: #000;
        font-weight: normal;
		grid-area: 1 / 2 / 2 / 3;
		place-content: end;
    }
    .price-than {
        font-size: 16px;
        color: #000;
        font-weight: normal;
		grid-area: 2 / 2 / 3 / 3;
    }

    .product_tag {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 8px; 
        margin-bottom: 0;
        padding: 0;
        list-style: none;
    }

    .colorbox .product_tag {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 0; 
        margin-bottom: 0;
        padding: 0;
        list-style: none;
    }

    .product_tag li {
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 2px;
        background: #e6f5ee;
        color: #009965;
    }
    
    .product_tag li.glory { background: #e3f2fd; color: #1565c0; }
    .product_tag li.fujidenki { background: #e8f5e9; color: #2e7d32; }

    /* 詳細を見るボタンのスタイル - 控えめなデザインに修正 */
.detail-link{
	background: #fff;
	color: #009951;
	border: 1px solid #009951;
	border-radius: 48px;
	font-weight: bold;
	width: 200px;
    display: block;
    padding: 5px;
    line-height: 1.5;
    font-size: 1.6rem;
    transition: 0.2s;
	text-decoration:none;
	position: absolute;
	text-align:center;
	bottom: -20px;
	left:calc(50% - 100px);
}

.detail-link:after{
    content: '\f105';
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    position: absolute;
    right: 30px;
}


.detail-link:hover {
    transition: 0.2s;
	background: #009951;
	color: #fff;
	border: 1px solid #009951;
	opacity:unset !important;
}
.posbox:hover .detail-link {
    transition: 0.2s;
	background: #009951;
	color: #fff;
	border: 1px solid #009951;
	opacity:unset !important;
}



    /* スタイル修正終わり */


    .productImg {
        margin-bottom: 5px;
        height: 150px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        padding: 5px;
        overflow: hidden;
        position: relative;
    }
    
    .productImg img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        display: block;
    }

    /* カテゴリラベル */
    .category-label {
        position: absolute;
        top: 0;
        left: 0;
        right: auto;
        color: #fff;
		background:#4db885;
        font-size: 12px;
        padding: 8px 20px;
        border-radius: 0 0 8px 0;
        font-weight: bold;
        z-index: 10;
		/*
        box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
		*/
    }
/*
    .category-label.type-drawer { background-color: #0D47A1; } 
    .category-label.type-semiself { background-color: #E65100; } 
    .category-label.type-fullself { background-color: #AD1457; } 
    .category-label.type-cashless { background-color: #388E3C; } 
*/
    /* ▼▼▼ モーダル内スライド修正用CSS（260px基準調整版） ▼▼▼ */

    /* 画像エリア（親枠） */
    .modal-body .col-6.img {
        display: block !important;
        position: relative;
        width: 50%;
        /* ★変更：下に余白を確保（画像260px化に伴いバランス調整） */
        padding: 0 45px 35px 45px;
        box-sizing: border-box;
        margin: 0;
        text-align: center;
    }

    /* スライダー本体 */
    .modal-body .single-item {
        width: 100%;
        margin: 0 auto;
        opacity: 0;
        transition: opacity 0.3s;
        /* ★変更：固定値ではなくautoにして中身に合わせる（画像が高さの基準になるため） */
        height: auto !important; 
    }

    .modal-body .single-item.slick-initialized {
        opacity: 1;
    }

    /* スライドの1枚1枚 */
    .modal-body .slick-slide {
        height: auto !important;
        display: flex !important;
        align-items: center;
        /* ★変更：画像を上寄せにして位置を固定 */
        justify-content: flex-start;
        flex-direction: column;
    }
    
    /* ★画像：260pxの枠を確保して配置 */
    .modal-body .slick-slide img {
        display: block;
        width: 100%;
        /* ★変更：260pxのエリアを常に確保 */
        height: 310px !important; 
        /* 枠に合わせて比率維持で収める */
        object-fit: contain;
        margin: 0 auto 10px auto;
    }
    
    /* 画像下のテキスト */
    .modal-body .slick-slide p {
        margin: 0;
        font-size: 13px;
        color: #666;
        line-height: 1.2;
        height: 20px; 
        overflow: hidden;
    }
    
    /* 矢印 */
    .modal-body .slick-prev,
    .modal-body .slick-next {
        z-index: 100;
        width: 30px;
        height: 30px;
        /* ★変更：画像(260px)の中心あたりに来るように位置調整（約130px付近） */
        top: 130px; 
        transform: translateY(-50%);
    }
    /* パディングの内側に配置 */
    .modal-body .slick-prev { left: 0;}
    .modal-body .slick-next { right: 0; }
    
    .modal-body .slick-prev:before,
    .modal-body .slick-next:before {
        color: #555; 
        font-size: 28px;
        opacity: 1;
    }
    
    /* ドットナビゲーション */
    .modal-body .slick-dots {
        /* ★変更：キャプションの下（paddingエリア）に配置 */
        bottom: -20px; 
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
        text-align: center;
    }

    .modal-body .slick-dots li {
        position: relative;
        display: inline-block;
        width: 20px;
        height: 20px;
        margin: 0 5px;
        padding: 0;
        cursor: pointer;
    }

    .modal-body .slick-dots li button {
        font-size: 0;
        line-height: 0;
        display: block;
        width: 20px;
        height: 20px;
        padding: 5px;
        cursor: pointer;
        color: transparent;
        border: 0;
        outline: none;
        background: transparent;
    }

    .modal-body .slick-dots li button:before {
        font-family: sans-serif;
        font-size: 30px;
        line-height: 20px;
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
        content: '•';
        text-align: center;
        opacity: 0.25;
        color: #333;
        -webkit-font-smoothing: antialiased;
    }

    .modal-body .slick-dots li.slick-active button:before {
        opacity: 1;
        color: #4db885;
    }

    /* ▲▲▲ モーダル内スライド修正用CSS 終了 ▲▲▲ */

    /* モーダル基本スタイル */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 9999;
        display: none;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .modal-overlay.active {
        display: flex;
        opacity: 1;
    }

    .modal-window {
        background: #fff;
        width: 90%;
        max-width: 1440px;
        max-height: 90vh;
        border-radius: 24px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .modal-header {
        padding: 15px 30px;
        background: #f8fafc;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .modal-title {
        font-size: 20px;
        font-weight: bold;
        color: #333;
        margin: 0;
    }

    .modal-close-btn {
        background: none;
        border: none;
        font-size: 24px;
        color: #888;
        cursor: pointer;
        padding: 0;
        line-height: 1;
    }

    .modal-body {
        padding: 30px;
        overflow-y: auto;
        flex: 1;
    }

.modal-body .slick-prev,
.modal-body .slick-next{
	border:1px solid #009965;
	background:#fff !important;
	color:#009965 !important;
  width: 36px; height: 36px;
  text-indent:unset;
}

.modal-body .slick-prev::before,
.modal-body .slick-next::before{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 16px;
  color:#009965;
  line-height:34px;
  text-align:center;
    display: block;
}
.modal-body .slick-prev::before{content: "\f053"; padding-right:0.2rem;} /* < */
.modal-body .slick-next::before{content: "\f054"; padding-left:0.2rem;} /* > */


#modal-product-content{
	display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
grid-column-gap: 5rem;
grid-row-gap: 0;
}

    /* モーダル内のコンテンツ調整 */
    .modal-body .productImg.rc {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 20px;
        height: auto;
        padding: 0;
        /* 重要：justify-content を設定して左右のカラムを配置 */
        justify-content: space-between;
        align-items: flex-start;
		flex-direction: row-reverse;
grid-area: 1 / 1 / 2 / 3;
    }
    
    .modal-body .productTitle {
        font-size: 32px;
        font-weight: 600;
        color: #4db885;
        display: block;
        border-bottom: none;
        padding-bottom: 5px;
        border-top: none; 
        background: none;
		margin-bottom:1rem;
    }

    .modal-footer {
        padding: 20px;
        border-top: 1px solid #eee;
        background: #fff;
        text-align: center;
    }

    .modal-apply-btn {
        display: inline-block;
        background-color: #33ad74;
        color: #fff;
        padding: 15px 60px;
        border-radius: 30px;
        font-size: 20px;
        font-weight: bold;
        text-decoration: none;
        /* box-shadow: 0 4px 10px rgba(230, 0, 18, 0.3); */
        transition: all 0.3s;
		position:relative;
    }
    .modal-apply-btn:after{
    content: '\f105';
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    position: absolute;
    right: 15px;
}
    .modal-apply-btn:hover {
        background-color:rgb(18, 156, 106);
        transform: translateY(2px);
        color: #fff;
    }

    .no-results {
        width: 100%;
        text-align: center;
        padding: 40px;
        background: #fff;
        border-radius: 8px;
        color: #888;
        grid-column: 1 / -1;
        display: none;
    }
@media screen and (max-width:1023px) {
   .filter-groups-main {
        display: flex;
        flex-wrap: wrap;
        gap: 3rem;
	}
}
    
    /* ▼▼▼ レスポンシブレイアウトの修正 (SP/タブレット対応) ▼▼▼ */
    @media (max-width: 767px) {
        .search-container {
            flex-direction: column;
        }
        .search-sidebar {
            width: 100%;
            position: static;
            padding: 0; 
        }
        
        /* SPで横並びを解除し、縦積みに戻す */
        .filter-groups-main {
			display: grid;
        grid-template-columns: 1fr;
		grid-template-rows: repeat(6,auto);
			padding: 2rem;
            gap: 0;
        }
        .filter-groups-main .filter-section:nth-child(1),
        .filter-groups-main .filter-section:nth-child(2),
        .filter-groups-main .filter-section:nth-child(3) {
            width: 100%;
            padding-right: 0;
			padding-bottom:15px;
            margin-bottom: 15px;
            border-bottom: 1px solid #eee; 
        }
        
        /* フィルターオプションの調整 (SPは統一的に2列グリッド) */
        .filter-options,
        .filter-groups-main .filter-section:nth-child(1) .filter-options,
        .filter-groups-main .filter-section:nth-child(2) .filter-options,
        .filter-groups-main .filter-section:nth-child(3) .filter-options,
        .filter-section:last-child .filter-options {
            grid-template-columns: repeat(2, 1fr); 
            gap: 10px 5px; 
            padding-left: 5px;
            margin-top: 5px;
        }

    .filter-section {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
		padding-right:0;
    }
    .filter-section:last-of-type {
	        border-left: unset;
            border-top: 1px solid #eee; 
			padding-top:15px;
            margin-top: 15px;
			padding-left: 0;
			padding-right:0;
	}

/* 選択中タグ表示エリア */
    .active-tags-area {
		margin-bottom:15px;
		flex-direction:row;
		flex-wrap:wrap;
    }

    .active-tag {
		width:fit-content;
    }
    
    .active-tag::after {
    }

        .filter-main-title {
            padding-top: 0;
        }
        
        .filter-label {
            width: auto; 
            white-space: normal;
            font-size: 13px; 
        }
        
        /* モーダル内の調整（省略しない） */
        .modal-body .col-6 {
            width: 100%;
        }
        .modal-body .productImg.rc {
            flex-direction: column-reverse;
        }
        .modal-body .col-6.img {
            width: 100%;
            margin-bottom: 20px;
            padding: 0 30px 30px 30px; 
        }
        .modal-body .single-item,
        .modal-body .slick-slide {
             height: auto !important; 
        }
        .modal-body .slick-slide img {
            height: 200px !important; 
        }
        .modal-body .slick-prev,
        .modal-body .slick-next {
            top: 100px; 
        }
    }