/* ▼サイドバー上部自由入力欄▼ */
/* ========== 基本設定 ========== */
.ec-summaryRole__inner.free_input__area {
  padding: 10px;
}

.ec-summaryRole__inner.free_input__area>*:last-child {
  margin-bottom: 5px;
}

.product-selection {
  background: #fff;
  padding: 0;
  margin: 5px 0 10px 0;
}

.product-selection__label {
  font-size: 14px;
  font-weight: bold;
  color: #595757;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-selection__selected-value {
  color: #2563eb;
  font-weight: bold;
  font-size: 14px;
}

/* ========== 列数制御システム ========== */
.product-selection__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: stretch;
  /* 同じ行の高さを揃える */
}

.product-selection__option {
  display: flex;
  /* ボタンを高さ100%にするため */
}

/* 1列レイアウト */
.product-selection__options.col-1 .product-selection__option {
  flex: 0 0 100%;
  max-width: 100%;
}

/* 2列レイアウト */
.product-selection__options.col-2 .product-selection__option {
  flex: 0 0 calc(50% - 4px);
  max-width: calc(50% - 4px);
}

/* 3列レイアウト */
.product-selection__options.col-3 .product-selection__option {
  flex: 0 0 calc(33.333% - 5.333px);
  max-width: calc(33.333% - 5.333px);
}

/* 4列レイアウト */
.product-selection__options.col-4 .product-selection__option {
  flex: 0 0 calc(25% - 6px);
  max-width: calc(25% - 6px);
}

/* ========== ラジオボタンスタイル ========== */
.product-selection__button {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #595757;
  font-size: 13px;
  font-weight: normal;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 100%;
  /* 親要素の高さに合わせる */
  position: relative;
  padding-left: 36px;
  /* ラジオボタン用のスペース */
  text-decoration: none;
}

/* ラジオボタン（疑似要素） */
.product-selection__button::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid #ddd;
  border-radius: 50%;
  background: #fff;
  transition: all 0.2s ease;
}

/* ラジオボタンの内側の点 */
.product-selection__button::after {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4a90e2;
  transition: all 0.2s ease;
}

/* ホバー状態 */
.product-selection__button:hover {
  border-color: #c77922;
  background: #fffbf7;
}

.product-selection__button:hover::before {
  border-color: #c77922;
}

/* 選択中状態 */
.product-selection__option.selected .product-selection__button {
  border-color: #c77922;
  background: #f0f7ff;
  color: #333;
  font-weight: 600;
}

.product-selection__option.selected .product-selection__button::before {
  border-color: #4a90e2;
  background: #fff;
}

.product-selection__option.selected .product-selection__button::after {
  transform: translateY(-50%) scale(1);
  /* 内側の点を表示 */
}

/* バナー画像のスタイル */
.product-selection__banner {
  width: 100%;
  height: 100%;
}

.product-selection__banner a {
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;
  text-decoration: none;
  position: relative;
}

.product-selection__banner a:hover {
  opacity: 0.8;
}

.product-selection__banner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* ▲サイドバー上部自由入力欄▲ */