@charset "UTF-8";

/* ▼▼▼ 商品選択セクション用CSS (ラジオボタン選択状態セレクタ修正) ▼▼▼ */
/* コンテナ */
.product-selector-container { max-width: 520px; margin: 30px auto; background-color: #f5f5f5; padding: 24px; box-sizing: border-box; font-size: 1.4rem; border: 1px solid #ddd; border-radius: 4px; }
/* ヘッダー */
.product-selector-container .ps-header { height: auto; padding-bottom: 15px; margin-bottom: 20px; display: flex; align-items: center; font-size: 1.6rem; font-weight: bold; color: #333; border-bottom: 1px solid #ccc; width: 100%; margin: 0 0 20px 0; box-sizing: border-box; }
/* セクションタイトル */
.product-selector-container .ps-section-title { margin: 0 0 20px 0; font-size: 1.4rem; color: #000; font-weight: bold; }
/* 商品グループ */
.product-selector-container .ps-product-group { margin-bottom: 32px; }
/* 商品アイテム */
.product-selector-container .ps-product-item { display: flex; align-items: center; background-color: #fff; padding: 10px; margin-bottom: 16px; transition: background-color 0.3s; position: relative; border: 1px solid #eee; box-sizing: border-box; }
.product-selector-container .ps-product-item.is-selected { background-color: #f1ede4; border-color: #d3c0a5; }
.product-selector-container .ps-product-item.is-disable { opacity: 0.5; pointer-events: none; }
.product-selector-container .ps-product-item.is-disable::after { content: "選択できません"; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.7); color: #333; display: flex; justify-content: center; align-items: center; font-size: 12px; font-weight: bold; text-align: center; }
.product-selector-container .ps-custom-select .ps-option[disabled] { opacity: 0.4; cursor: not-allowed; background-color: #eee !important; }
.product-selector-container #ps-category-a .ps-product-item:not(.is-disable) { cursor: pointer; }
.product-selector-container .ps-product-item img { width: 80px; height: 80px; object-fit: cover; margin-right: 10px; flex-shrink: 0; }
.product-selector-container .ps-product-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.product-selector-container .ps-product-name { font-size: 1.4rem; margin-bottom: 8px; line-height: 1.4; }
/* プルダウン関連 */
.product-selector-container .ps-custom-select-wrapper { position: relative; width: 100%; max-width: 280px; }
.product-selector-container .ps-custom-select .ps-selected-option { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 30px; padding: 0 10px; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; font-size: 1.3rem; text-align: left; box-sizing: border-box; appearance: none; -webkit-appearance: none; font-family: inherit; color: inherit; margin: 0; }
.product-selector-container .ps-custom-select .ps-selected-option-text { flex-grow: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-right: 5px; display: flex; align-items: center; }
.product-selector-container .ps-custom-select .ps-dropdown-arrow { font-size: 10px; color: #666; transition: transform 0.2s ease; flex-shrink: 0; }
.product-selector-container .ps-custom-select.open .ps-dropdown-arrow { transform: rotate(180deg); }
.product-selector-container .ps-custom-select .ps-options { display: none; flex-wrap: wrap; padding: 4px; border: 1px solid #ccc; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 10; max-height: 200px; overflow-y: auto; box-sizing: border-box; }
.product-selector-container .ps-custom-select.open .ps-options { display: flex; }
.product-selector-container .ps-custom-select .ps-option { width: 50%; box-sizing: border-box; padding: 8px; cursor: pointer; transition: background-color 0.2s; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* .product-selector-container .ps-custom-select .ps-option.is-selected { background-color: #e0e0e0; } /* 背景色での選択表現は削除またはコメントアウト */
.product-selector-container .ps-custom-select .ps-option:hover { background-color: #f0f0f0; }
.product-selector-container .ps-custom-select .ps-option img { width: 60px; height: 60px; object-fit: cover; margin-bottom: 4px; }
.product-selector-container .ps-custom-select .ps-option .ps-color-name { font-size: 1.2rem; line-height: 1.3; }
.product-selector-container .ps-selected-option-text .option-inner-content { display: flex; align-items: center; font-size: 1.2rem; }
.product-selector-container .ps-selected-option-text .option-inner-content img { width: 20px; height: 20px; margin-right: 5px; flex-shrink: 0; }
/* 合計金額エリア */
.product-selector-container .ps-total-area { margin-top: 24px; padding: 16px; background-color: #e8e8e8; text-align: center; font-weight: bold; font-size: 1.4rem; }
/* 購入ボタン スタイル修正 */
.product-selector-container .ps-buy-button { display: flex; align-items: center; justify-content: center; background-color: #ccc; color: #fff; border: none; font-size: 1.4rem; text-align: center; width: 100%; padding: 16px 0; margin-top: 16px; margin-bottom: 30px; cursor: default; opacity: 1; pointer-events: none; text-decoration: none !important; transition: background-color 0.3s; border-radius: 4px; }
.product-selector-container .ps-buy-button.is-active { background-color: #45433E; pointer-events: auto; cursor: pointer; border-radius: 0; text-decoration: none !important; }
.product-selector-container .ps-buy-button .ps-buy-button-icon { display: none; width: 20px; height: 20px; background: url('dummy_icon.svg') no-repeat center center; background-size: contain; margin-right: 10px; flex-shrink: 0; }
.product-selector-container .ps-buy-button.is-active .ps-buy-button-icon { display: inline-block; }
.product-selector-container .ps-buy-button .ps-buy-button-text { line-height: 1; text-decoration: none; }
/* 区切り線 */
.product-selector-container .ps-divider { display: flex; align-items: center; justify-content: center; margin: 24px 0; }
.product-selector-container .ps-divider::before, .product-selector-container .ps-divider::after { content: ""; flex: 1; height: 1px; background-color: #ccc; margin: 0 8px; }
.product-selector-container .ps-divider span { font-size: 16px; font-weight: bold; color: #666; }
/* レスポンシブ対応 */
@media screen and (max-width: 767px) { .product-selector-container { padding: 16px; } .product-selector-container .ps-custom-select-wrapper { max-width: none; } }

/* ▼▼▼ ラジオボタン風アイコンのスタイル (セレクタ修正版) ▼▼▼ */
/* アイコン共通スタイル */
.product-selector-container .ps-radio-icon { display: inline-block; width: 16px; height: 16px; border: 1px solid #ccc; border-radius: 50%; box-sizing: border-box; position: relative; flex-shrink: 0; background-color: #fff; }
/* --- カテゴリA --- */
.product-selector-container #ps-category-a .ps-radio-icon { margin-right: 10px; vertical-align: middle; }
.product-selector-container #ps-category-a .ps-product-name { margin-bottom: 0; }
/* --- カテゴリB --- */
.product-selector-container #ps-category-b .ps-option img { margin-bottom: 8px; }
.product-selector-container #ps-category-b .ps-option-text-wrapper { display: inline-flex; align-items: center; justify-content: center; }
.product-selector-container #ps-category-b .ps-radio-icon { margin-right: 5px; margin-bottom: 0; }
/* --- 選択状態 --- */
/* ★★★ セレクタ修正箇所 ★★★ */
/* カテゴリA 選択時 */
.product-selector-container #ps-category-a .ps-product-item.is-selected .ps-radio-icon { border-color: #333; }
.product-selector-container #ps-category-a .ps-product-item.is-selected .ps-radio-icon::after { content: ''; display: block; width: 8px; height: 8px; background-color: #333; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* カテゴリB 選択時 */
.product-selector-container #ps-category-b .ps-option.is-selected .ps-radio-icon { border-color: #333; }
.product-selector-container #ps-category-b .ps-option.is-selected .ps-radio-icon::after { content: ''; display: block; width: 8px; height: 8px; background-color: #333; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* ▲▲▲ ラジオボタン風アイコンのスタイル ▲▲▲ */

/* ▼▼▼ バナーエリア (マージンのみ指定) ▼▼▼ */
#banner-area { margin-top: 60px; }
/* ▲▲▲ バナーエリア ▲▲▲ */

/* 既存の末尾スタイル */
@media print, screen and (min-width: 993px) { div.cmd-indent_list.asterisk_ajust, ul.cmd-indent_list.asterisk_ajust { width: calc(100% + 2.4em)!important; margin-left: -1.4em!important; } }
@media print, screen and (min-width: 768px) and (max-width: 992px) { div.cmd-indent_list.asterisk_ajust, ul.cmd-indent_list.asterisk_ajust { width: calc(100% + 1em)!important; margin-left: -0.1em!important; } }


/* 画面幅が992px以下の場合に適用 */
@media screen and (max-width: 992px) {

}