.colorselect {
  position: relative;
  width: 80%;
  cursor: pointer;
  user-select: none;
}
.defaultcarbox.fixed .colorselect {
  width: 40%;
}

/* ▼ SOLD OUT 時に追加されるクラス */
.colorselectnone {
  width: 100% !important;
}
.defaultcarbox.fixed .colorselectnone {
  width: 60% !important;
}


.colorselect::before {
  content: "\30AB\30E9\30FC";
  display: block;
  font-size: 12px;
  color: #777;
  text-align: left;
}

.colorselect .selected {
  padding: 10px 20px;
  background: #fff;
  border: 1px solid #ddd;
  font-family: "Quattrocento", 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
  font-size: 12px;
  text-align: left;
  letter-spacing: .1em;
  position: relative;
	white-space: nowrap;
}

.colorselect .selected::after {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 1em;
  background: #fff;
  border-left: none;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  box-sizing: content-box;
  color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
  content: "\e90f";
  font-family: 'fs-icon' !important;
  font-size: 1.8rem;
  line-height: 1;
  padding: 8px;
  pointer-events: none;
  z-index: 2;
}

.colorselect ul {
  display: none;
}

/* ▼ ドロップダウン */
.colorselect-dropdown {
  position: absolute;
  left: 0;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  z-index: 1000;
}

.defaultcarbox .colorselect-dropdown {
  width: 100%;
}

.defaultcarbox.fixed .colorselect-dropdown {
  width: 210%;
}

/* ▼ active */
.colorselect-dropdown.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ▼ 背景画像付き a */
.colorselect-dropdown a {
  display: flex;
  align-items: center;
  padding: 15px 20px 15px 60px;
  text-decoration: none;
  color: #333;
  font-family: "Quattrocento", 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
  font-size: 12px;
  text-align: left;
  letter-spacing: .1em;
	border-bottom: 1px solid #eee;
  height: 60px;
  background-size: 40px auto;
  background-position: left 10px center;
  background-repeat: no-repeat;
}

.colorselect-dropdown a:hover {
  opacity: .8;
}

.colorselect ul li.active a {
  font-weight: bold;
}

/* ▼ SOLD OUT ボックス */
.soldoutbox {
  margin: 0 0 10px;
  width: 100%;
}
.soldoutbox span {
  display: inline-block;
  width: 100%;
  background: #ccc;
  color: #fff;
  padding: 9px;
  font-size: 14px;
  letter-spacing: .2em;
  text-align: center;
}

.defaultcarbox.fixed .soldoutbox {
  margin: 18px 0 10px;
  width: 38%;
}

#cartbox .fs-c-productActionButton.hidebox,
#cartbox1 .fs-c-productActionButton.hidebox {
  display: none !important;
}

.fs-c-productNotice.fs-c-productNotice--outOfStock {
  display: none;
}

@media (min-width: 768px) {
	.colorselect {
	  width: 70%;
	}
	/* ▼ SOLD OUT 時に追加されるクラス */
	.colorselectnone {
	  width: 100% !important;
	}
	.defaultcarbox.fixed .colorselect {
	  width: 34%;
	}
	.colorselect .selected {
	  padding: 18px 20px;
	}
	.colorselect-dropdown {
	  position: absolute;
	  left: 0;
	  width: 100%;
	  background: white;
	}
	.soldoutbox {
	  margin: 0 0 10px;
	  width: 100%;
	}
	.defaultcarbox.fixed .soldoutbox {
	  margin: 18px 0 10px;
	  width: 49%;
	}
	.soldoutbox span {
	  display: inline-block;
	  width: 100%;
	  background: #ccc;
	  color: #fff;
	  padding: 17px;
	  font-size: 14px;
	  letter-spacing: .2em;
	  text-align: center;
	}
	.defaultcarbox.fixed .soldoutbox span {
	  display: inline-block;
	  width: 100%;
	  background: #ccc;
	  color: #fff;
	  padding: 17px;
	  font-size: 14px;
	  letter-spacing: .2em;
	  text-align: center;
	}

	.defaultcarbox.fixed .colorselect{
	  width: 50% !important;
	}
	#main #item-page2 .defaultcarbox.fixed{
		display: flex;
	}
	#main #item-page2 #cartbox.fixed .fs-c-productActionButton, #main #item-page2 #cartbox1.fixed .fs-c-productActionButton{
		width: 34%;
	}
}