@charset "UTF-8";

/* --- モーダル全体のフォント設定 --- */
#js-search-modal {
    font-family: "hiragino-mincho-pron", "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    color: #333;
    -webkit-font-smoothing: antialiased;
}



/* 全体の並び替え：右寄せにして、文字を左、ボタンを右に固定 */
.fs-p-productSearch {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    border-bottom: 1px solid #999999;
}

/* メッセージの順序と、開いた時の非表示設定 */
.fs-p-productSearch__parameter {
	text-align: right; 
	padding: 5px 10px;
    order: 1 !important;
}

#fs_p__ctrlSeachForm:checked ~ .fs-p-productSearch__parameter {
    display: none !important;
}

/* ボタンの順序 */
.fs-p-productSearch__formSwitch {
    order: 2 !important;
}

/* ボタン内の文字の切り替え（元のデザインを壊さないための最小設定） */
.fs-p-productSearch__formClose {
    display: none; /* 初期状態は隠す */
}

#fs_p__ctrlSeachForm:checked ~ .fs-p-productSearch__formSwitch .fs-p-productSearch__formOpen {
    display: none; /* 開いた時は「詳細検索」を消す */
}

#fs_p__ctrlSeachForm:checked ~ .fs-p-productSearch__formSwitch .fs-p-productSearch__formClose {
    display: inline; /* 開いた時は「閉じる」を出す */
}


/* --- 共通フォント・基本設定 --- */
.search-modal__header-custom,
.search-modal__footer-fixed,
.btn-standard-style,
.btn-primary-style {
    font-family: "hiragino-mincho-pron", "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif !important;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}

/* --- 上段エリアのレイアウト --- */
.search-modal__header-custom {
    display: block;
    padding: 16px 5% ; /* 上下16px, 左右5% */
    margin-top: 15px;
    background-color: #ffffff;
    border-bottom: 1px solid #ececec;
}

.search-modal__intro-text {
    margin: 0;
    font-size: 1.6rem;
    color: #333;
    font-weight: 300;
    line-height: 1.5;
}

.search-modal__header-btn-group {
    display: flex;
    justify-content: center ;
    gap: 15px;
    margin: 10px 0;
}

/* --- 下段エリアのレイアウト（固定） --- */
.search-modal__footer-fixed {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 16px;
    background-color: #ffffff;
    border-top: 1px solid #ececec;
    margin-top: 10px;
    z-index: 100;
}

/* --- ボタンデザインの定義（上下共通） --- */
.btn-standard-style,
.btn-primary-style {
    font-family: var(--font-family-japan) !important;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    box-sizing: border-box;
    word-break: normal;
    border: solid 1px #797373;
    border-radius: 3px;
}

/* 「すべてクリア」（白背景） */
.btn-standard-style {
    background-color: #ffffff;
    color: #3c3c3c;
}

/* 「この条件で検索」（黒背景） */
.btn-primary-style {
    background-color: #211f1a;
    color: #ffffff;
    font-weight: bold;
}

.btn-standard-style:hover,
.btn-primary-style:hover {
    opacity: 0.8 ;
}


/* --- キーワードボックスボックス --- */
.search-keyword-box{
	width: 90%;
	border: 1px solid #797373;
}

/* --- キーワードボタン --- */
.search-keyword-button{
	width: 44px;
	display: flex; 
	align-items: center;
}

/* --- 詳細検索：各絞り込みエリア共通スタイル --- */
#area-grape, 
#area-champagne-type, 
#area-region, 
#area-subregion, 
#area-classification, 
#area-vintage, 
#area-producer-type, 
#area-medoc-rank {
    display: none; /* JSで制御するため初期は非表示 */
    padding: 16px;
    border-radius: 8px;
    margin-top: 10px;
}

/* --- 品種エリア --- */
#area-grape {
    border: 1px solid #e5e7eb;
    background-color: #fafafa;
}

/* --- シャンパンタイプエリア --- */
#area-champagne-type {
    border: 1px solid #e5e7eb;
    background-color: #fdfaf5;
}

/* --- 生産国エリア（共通余白のみ） --- */
#area-country {
    margin-top: 10px;
}

/* --- 生産地域エリア --- */
#area-region {
    border: 1px solid #e7e5e4;
    background-color: #fcfbf9;
}

/* --- 生産地区エリア --- */
#area-subregion {
    border: 1px solid #e7e5e4;
    background-color: #f5f5f4;
}

/* --- ブルゴーニュ格付けエリア --- */
#area-classification {
    border: 1px solid #fecaca;
    background-color: #fef2f2;
}

/* --- バックヴィンテージエリア --- */
#area-vintage {
    border: 1px solid #dcfce7;
    background-color: #f0fdf4;
}

/* --- 生産者形態エリア --- */
#area-producer-type {
    border: 1px solid #e0f2fe;
    background-color: #f0f9ff;
}

/* --- メドック格付けエリア --- */
#area-medoc-rank {
    border: 1px solid #ffedd5;
    background-color: #fff7ed;
}


/* --- 価格範囲エリア --- */
#area-price-range {
    margin-top: 24px;
    padding: 0;
}

#area-price-range h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
}

/* スライダー外枠 */
.range-slider-wrapper {
    position: relative;
    width: 100%;
    height: 30px;
    margin: 0 auto;
    display: block !important;
}

/* スライダーのベース線 */
.range-slider-bg {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    pointer-events: none;
    z-index: 1;
    transform: translateY(-50%);
}

/* 選択中の範囲（黒線） */
#price-range-track {
    position: absolute;
    top: 50%;
    height: 4px;
    background: #211f1a;
    border-radius: 2px;
    pointer-events: none;
    z-index: 2;
    transform: translateY(-50%);
}

/* スライダー本体（共通） */
.custom-range {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    -webkit-appearance: none;
    pointer-events: none;
    z-index: 3;
}

#price-slider-max {
    z-index: 4;
}

/* スライダーのつまみ（Chrome/Safari用） */
.custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border: 2px solid #211f1a;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* スライダーのつまみ（Firefox用） */
.custom-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #ffffff;
    border: 2px solid #211f1a;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto !important;
}

/* ラベル表示エリア */
.price-labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 10px auto 0;
    font-size: 14px;
    font-family: serif;
}

.price-separator {
    color: #999;
}

/* --- フィルターボタン（バッジ）のデザイン --- */
.filter-badge {
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.5;
    padding: 8px 18px;
    border: 1px solid #d1d5db; /* 少し明るめの境界線 */
    border-radius: 15px;       /* 鋭い角で上品に */
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    margin-bottom: 5px;       /* ボタン同士の縦の間隔 */
}

/* ボタン：アクティブ（選択中）の状態 */
.filter-badge.is-active {
    background-color: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}

/* --- 見出しのスタイル --- */
#js-search-modal h4 {
    font-weight: 600;
    margin-bottom: 12px;
    color: #222;
    padding-left: 10px;
    font-size: 16px;
}


/* --- モーダルの表示・非表示 --- */
#js-search-modal.hidden { display: none; }


.custom-range::-webkit-slider-runnable-track { background: transparent !important; border: none !important; }
.custom-range::-moz-range-track { background: transparent !important; border: none !important; }

/* --- シャンパンタイプ専用エリアの装飾 --- */
#area-champagne-type {
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin-top: 10px;
    background-color: #fdfaf5; /* ほんのりベージュで区別 */
}

/* --- ボタンの横並びを保証する設定 --- */
#group-champagne-type, 
#group-grape, 
#group-wineType, 
#group-country, 
#group-region, 
#group-subregion {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 10px;
}

/* --- シャンパン用ボタンの個別設定 --- */
.champagne-btn {
    /* filter-badgeと同じ基本スタイルを継承させます */
    display: inline-block;
    font-size: 14px;
    padding: 8px 16px;
    border: 1px solid #d1d5db;
    border-radius: 15px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.champagne-btn.is-active {
    background-color: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}

/* --- 特価品 & 在庫チェック共通 --- */
#area-special-items {
    margin-top: 12px;
}

#area-stock-status {
    margin-top: 20px;
    padding: 10px 0;
    border-top: 1px solid #eee;
}

/* チェックボックスとラベルのレイアウト */
.filter-checkbox-group {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 5px 0;
}

.filter-checkbox-label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}

/* チェックボックス自体の大きさ調整 */
.filter-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin: 0;
}

/* テキストのフォント設定 */
.filter-checkbox-label span {
    font-size: 16px;
}


/* --- 選択解除（すべて）ボタンの調整 --- */
.filter-badge[data-value="null"],
.champagne-btn[data-value="null"] {
    border-style: dashed; /* 「すべて」は点線にして分かりやすくする等のアレンジ */
    color: #666;
}