/*
 * ギャラリーでの部門選択セレクトボックスのカスタマイズ用
 * js/select_gallery.js とセットで使用
 */
.udc-center {
	position: relative;
	width: 100%;
	display: inline-block;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

/** Custom Select **/
.udc-select-wrapper {
	position: relative;
	display: inline-block;
	user-select: none;
	width: 100%;
}
.udc-select-wrapper select {
	display: none;
}
.udc-select {
	position: relative;
	display: inline-block;
	width: 100%;
}
.udc-select-trigger {
	background: linear-gradient(90deg, #55FFCD 40%, #00A3E1 100%);
	/*background: linear-gradient(270deg, #1B5E06 0%, #177305 35%, #495463 100%);*/
	border-radius: 40px;
	color: #fff;
	cursor: pointer;
	display: block;
	line-height: 60px;
	position: relative;
	width: 100%;
	text-align: center;
}
.udc-select-trigger:after {
	position: absolute;
	display: block;
	content: '';
	width: 10px; height: 10px;
	top: 50%; right: 25px;
	margin-top: -3px;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: rotate(45deg) translateY(-50%);
	transition: all .4s ease-in-out;
	transform-origin: 50% 0;
}
.udc-select.opened .udc-select-trigger:after {
	margin-top: 3px;
	transform: rotate(-135deg) translateY(-50%);
}
.custom-options {
	color: #fff;
	position: absolute;
	display: block;
	top: 100%; left: 0; right: 0;
	min-width: 100%;
	margin: 15px 0;
	border: 1px solid #b5b5b5;
	border-radius: 4px;
	box-sizing: border-box;
	box-shadow: 0 2px 1px rgba(0,0,0,.07);
	background: linear-gradient(270deg, #1B5E06 0%, #177305 35%, #495463 100%);
	transition: all .4s ease-in-out;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-15px);
}
.udc-select.opened .custom-options {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
	transform: translateY(0);
}
.option-hover:before {
	background: #f9f9f9;
}
.custom-option {
	position: relative;
	display: block;
	padding: 0 22px;
	border-bottom: 1px solid #b5b5b5;
	color: #b5b5b5;
	line-height: 47px;
	cursor: pointer;
	text-align: center;
	transition: all .4s ease-in-out;
	z-index: 2;
}
.custom-option:first-of-type {
	border-radius: 4px 4px 0 0;
}
.custom-option:last-of-type {
	border-bottom: 0;
	border-radius: 0 0 4px 4px;
}
.custom-option:hover,
.custom-option.selection {
	background: linear-gradient(270deg, #3B7E26 0%, #379325 35%, #697483 100%);
}