/* チェアカテゴリ全体のレイアウト */
.ct1111_main {
 display: flex;
 height: calc(100vh - 200px);
 overflow: hidden;
}

.ct1111_left {
 width: 250px;
 margin-right: 30px;
 overflow-y: scroll;
 position: relative;
 /* --- 以下、Firefox向けのスクロールバーデザイン --- */
 scrollbar-width: thin;
 /* 幅を細く */
 scrollbar-color: #CCCCCC #F2F2F2;
 /* [つまみの色] [軌道の色] */
}

/* スクロールバー全体の幅 */
.ct1111_left::-webkit-scrollbar {
 width: 10px;
}

/* スクロールバーの軌道（トラック） */
.ct1111_left::-webkit-scrollbar-track {
 background-color: #F2F2F2;
 border-radius: 5px;
}

/* スクロールバーのつまみ（サム） */
.ct1111_left::-webkit-scrollbar-thumb {
 background-color: #CCCCCC;
 border-radius: 5px;
}

/* つまみにマウスが乗った時の色 */
.ct1111_left::-webkit-scrollbar-thumb:hover {
 background-color: #708090;
}

.ct_detail_search-form {
 /*position: sticky; スクロールに応じて固定 */
 /*top: 85px; 上部からの固定位置 */
 background-color: #F5F5F5;
 padding: 20px 10px;
 width: 220px;
 letter-spacing: -1px;
}

.ct111-kotei {
 position: sticky;
 top: 0;
 background-color: #F5F5F5;
 /* 背景を付けて下の内容が透けないように */
 z-index: 10;
 /* 必要に応じて前面に */
 /* 境界線や余白調整 */
 border-bottom: 1px solid #ddd;
 margin-bottom: 10px;
}


/* --- アコーディオンヘッダー (h2) --- */
.ct_detail_search-form_waku2>h2 {
 position: relative;
 /* アイコン絶対配置の基準 */
 cursor: pointer;
 /* クリック可能 */
 padding-right: 24px;
 /* アイコン領域確保 */
 font-size: 14px;
 font-weight: bold;
 margin: 0 0 10px;
 user-select: none;
 /* テキスト選択防止 */
}

.ct_detail_search-form_waku h3 {
 position: relative;
 /* アイコン絶対配置の基準 */
 cursor: pointer;
 /* クリック可能 */
 padding-right: 24px;
 /* アイコン領域確保 */
 font-size: 14px;
 font-weight: normal;
 margin: 0 0 10px;
 user-select: none;
 /* テキスト選択防止 */
}

/* 開閉アイコン */
.accordion-icon {
 font-size: 18px;
 font-weight: bold;
 position: absolute;
 right: 0;
 top: 50%;
 transform: translateY(-50%);
 user-select: none;
 pointer-events: none;
 /* アイコン単独はクリック無効 */
}

/* アコーディオンの中身（フォーム） */
.ct_detail_search-form_waku2 form {
 display: block;
 /* 初期は全て開く */
 margin-top: 0;
 margin-bottom: 20px;
}

/* h2のアクティブ状態のスタイル（必要なら変更可能） */
.ct_detail_search-form_waku2>h2.active {
 color: #222;
}

/* チェックボックス・ラジオボタン周り */
.ct_detail_search-form_waku label {
 margin: 0 0 15px;
 display: inline-block;
}

.ct_detail_search-form_waku label:last-of-type {
 padding-bottom: 25px;
}

/* ラジオボタンのカスタムスタイル */
.ct_detail_search-form_waku label input[type="radio"] {
 position: relative;
 width: 20px;
 height: 20px;
 border: 1px solid #CCCCCC;
 border-radius: 10px;
 background-color: #fff;
 vertical-align: -5px;
 appearance: none;
}

.ct_detail_search-form_waku label input[type="radio"]:checked {
 border-color: #000;
}

.ct_detail_search-form_waku input[type="radio"]:checked:before {
 position: absolute;
 top: 2px;
 left: 2px;
 width: 14px;
 height: 14px;
 background-color: #000;
 border-radius: 10px;
 content: '';
}

/* チェックボックスのカスタムスタイル */
.ct_detail_search-form_waku label input[type="checkbox"] {
 position: relative;
 width: 20px;
 height: 20px;
 border: 1px solid #CCCCCC;
 background-color: #fff;
 vertical-align: -5px;
 appearance: none;
}

.ct_detail_search-form_waku label input[type="checkbox"]:checked {
 border-color: #000;
 background-color: #000;
}

.ct_detail_search-form_waku input[type="checkbox"]:checked:before {
 position: absolute;
 top: 4px;
 left: 7px;
 transform: rotate(50deg);
 width: 4px;
 height: 8px;
 border-right: 1px solid #fff;
 border-bottom: 1px solid #fff;
 content: '';
}

/* 無効状態のフィルターラベル */
.filter-disabled {
 color: #ccc;
 pointer-events: none;
 /* ホバー時のポインターを無効に */
 cursor: default;
}

.ct_detail_search-header {
 text-align: left;
 font-size: 16px;
 font-weight: bold;
 margin-bottom: 10px;
}

.js-detail_search-number {
 font-size: 24px;
}

/* クリアボタン */
#clear-filter {
 width: 100%;
 background-color: #fff;
 padding: 5px;
 border: 1px solid #DCDCDC;
 margin: 0 0 10px;
 cursor: pointer;
}

#ingharijicolortype-filter-form,
#duora2harijicolortype-filter-form,
#inglifecolortype1-filter-form,
#inglifecolortype2-filter-form,
#inglifecolortype3-filter-form {
 display: flex;
 flex-wrap: wrap;
 gap: 5px;
}

#ingharijicolortype-filter-form label,
#duora2harijicolortype-filter-form label,
#inglifecolortype1-filter-form label,
#inglifecolortype2-filter-form label,
#inglifecolortype3-filter-form label {
 text-align: center;
 margin: 0 0 10px;
 width: 46px;
 position: relative;
}

#ingharijicolortype-filter-form label input[type="checkbox"],
#duora2harijicolortype-filter-form label input[type="checkbox"],
#inglifecolortype1-filter-form label input[type="checkbox"],
#inglifecolortype2-filter-form label input[type="checkbox"],
#inglifecolortype3-filter-form label input[type="checkbox"] {
 margin: 0;
}

#ingharijicolortype-filter-form label img,
#duora2harijicolortype-filter-form label img,
#inglifecolortype1-filter-form label img,
#inglifecolortype2-filter-form label img,
#inglifecolortype3-filter-form label img {
 cursor: pointer;
}

/* 商品一覧右側 */
.ct1111_right {
 flex: 1;
 overflow-y: scroll;
 /* --- 以下、Firefox向けのスクロールバーデザイン --- */
 scrollbar-width: thin;
 /* 幅を細く */
 scrollbar-color: #CCCCCC #F2F2F2;
 /* [つまみの色] [軌道の色] */
}

/* スクロールバー全体の幅 */
.ct1111_right::-webkit-scrollbar {
 width: 10px;
}

/* スクロールバーの軌道（トラック） */
.ct1111_right::-webkit-scrollbar-track {
 background-color: #F2F2F2;
 border-radius: 5px;
}

/* スクロールバーのつまみ（サム） */
.ct1111_right::-webkit-scrollbar-thumb {
 background-color: #CCCCCC;
 border-radius: 5px;
}

/* つまみにマウスが乗った時の色 */
.ct1111_left::-webkit-scrollbar-thumb:hover {
 background-color: #708090;
}

.ct_detail {
 display: flex;
 flex-wrap: wrap;
}

.ct_detail .img_detail_search_list {
 width: 175px;
 padding: 0 5px 25px;
 box-sizing: border-box;
 margin: 0;
}

.ct_detail .img_detail_search_list .list-price {
 text-align: right;
 font-weight: bold;
 font-size: 16px;
}

.ct_detail .img_detail_search_list .list-price .tax {
 font-size: 12px;
 font-weight: normal;
}

.ct_detail .img_detail_search_list a {
 text-decoration: none;
}

.ct_detail .img_detail_search_list a:hover {
 opacity: 0.8;
}

.list-detail {
 /* ↓ツールチップ表示のために追加するスタイル↓ */
 position: relative;
 /* ツールチップの位置を決める基準になります */
 cursor: pointer;
 /* マウスカーソルを指の形に変えます */
 z-index: 1;
}

.ct_detail-name {
 display: -webkit-box;
 line-height: 1.75;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 4;
 overflow: hidden;
}

/* ホバー時にツールチップ（全文）を表示するスタイル */
.ct_detail-name:hover::after {
 content: attr(data-full-text);
 display: block;
 position: absolute;
 top: -10px;
 left: 0;
 z-index: 10;
 width: 165px;
 min-width: 165px;
 background-color: #fff;
 border: 1px solid #ccc;
 border-radius: 4px;
 padding: 5px;
 color: #333;
 line-height: 1.6;
 text-align: left;
 white-space: normal;
}

.ct_detail-name p {
 font-size: 14px;
 font-weight: bold;
}

.ct11_wrapper .ct_detail_main .price {
 padding: 15px 0;
 font-size: 14px;
}

.ct_detail-description p {
 font-size: 12px;
}

.ct_detail-price {
 text-align: right;
}

.ct_detail-buttons {
 display: flex;
 justify-content: space-between;
}

.ct_detail-buttons .btn {
 width: 48%;
 margin: 0;
 background-color: #EEEEEE;
}

a.btn.ctsearchbtn {
 border-radius: 36px;
 background-color: #333333;
 color: #ffffff;
}

a.btn.ctdetailbtn {
 border: 1px solid #707070;
 border-radius: 36px;
 background-color: #fff;
}



/* ツールチップ */
.ct1111_tooltip-container {
 position: relative;
 display: inline-block;
 vertical-align: middle;
 line-height: 1.1;
}

.ct11_question-mark {
 margin-left: 5px;
 vertical-align: text-top;
 position: relative;
}

#duora2castertype-filter-form .ct11_question-mark,
#inglifekumitate-filter-form .ct11_question-mark {
 margin-left: 0px;
}

.ct11_question-mark img {
 width: 16px;
}

.ct1111_tooltip {
 position: absolute;
 bottom: 30px;
 left: -50px;
 transform: translateX(0%);
 width: 200px;
 background-color: #ffffff;
 border: 1px solid #ddd;
 border-radius: 4px;
 box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
 padding: 10px;
 font-size: 12px;
 line-height: 1.4;
 color: #333;
 display: none;
 /* 初期非表示 */
 z-index: 10;
}

.ct1111_tooltip::after {
 content: "";
 position: absolute;
 bottom: -8px;
 /* 吹き出しの下部に矢印 */
 left: 20px;
 transform: translateX(-50%);
 width: 0;
 height: 0;
 border-left: 8px solid transparent;
 border-right: 8px solid transparent;
 border-top: 8px solid #ffffff;
}

.ct1111_tooltip-container:hover .ct1111_tooltip {
 display: block;
 /* ホバー時表示 */
}

.ct1111_tooltip1 {
 left: -70px;
}

.ct1111_tooltip1::after {
 bottom: -8px;
 /* 吹き出しの下部に矢印 */
 left: 75px;
}

.ct1111_tooltip2 {
 left: -120px;
}

.ct1111_tooltip2::after {
 bottom: -8px;
 /* 吹き出しの下部に矢印 */
 left: 125px;
}

.ct1111_tooltip3 {
 left: -170px;
}

.ct1111_tooltip3::after {
 bottom: -8px;
 /* 吹き出しの下部に矢印 */
 left: 180px;
}

/* tooltipを初期は非表示 */
.accordion-content.harijicolor-list label .tooltip {
 position: absolute;
 background: rgba(0, 0, 0, 0.75);
 color: #fff;
 padding: 4px 8px;
 border-radius: 4px;
 font-size: 12px;
 white-space: nowrap;
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.3s ease;
 top: -30px;
 /* 画像の上に表示 */
 /*left: 50%;*/
 /*transform: translateX(-50%);*/
 z-index: 10;
}

.accordion-content.harijicolor-list label:nth-of-type(4n-3) .tooltip {
 left: 0;
}

.accordion-content.harijicolor-list label:nth-of-type(4n) .tooltip {
 right: 0;
}

.accordion-content.harijicolor-list label:nth-of-type(4n-1) .tooltip {
 right: -20px;
}

/* labelをrelativeにしてtooltipの基準に */
.accordion-content.harijicolor-list label {
 position: relative;
 display: inline-block;
 cursor: pointer;
}

/* ホバー時にtooltipを表示 */
.accordion-content.harijicolor-list label:hover .tooltip {
 opacity: 1;
 pointer-events: auto;
}