/* カラージェネレーター ena201802 */
.cg_sample_wrap {
	border: 1px solid #a9b2b1;
	width: 100%;
	box-sizing: border-box;
	padding: 15px;
	margin: 10px auto 15px;
	text-align: center;
}
ul#cg_colors li {
	float: left;
	margin: 0 10px 0 0;
}
ul#cg_buttons {
	margin: 15px 0;
}
ul#cg_buttons li {
	width: 25%;
	float: left;
	text-align: center;
	background: #f5f5f5;
	border: 1px solid #a9b2b1;
	border-left: none;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	cursor: pointer;
}
ul#cg_buttons li:first-child {
	border: 1px solid #a9b2b1;
}
ul#cg_buttons li a {
	color: #55605f;
	display: block;
	padding: 5px;
}
ul#cg_buttons li:hover {
	background: #CCD2D2;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
ul#cg_buttons li.active {
	font-weight: bold;
	color: #fff;
	background: #78CFC7;
}
ul#cg_buttons li.active a {
	color: #fff;
}

/* SP版：色、背景、枠線選択 */
ul#cg_colors_mobile {
	margin: 10px 0;
}
ul#cg_colors_mobile li {
	float: left;
	width: 33.3%;
	text-align: center;
	background: #f5f5f5;
	border: 1px solid #a9b2b1;
	border-left: none;
	box-sizing: border-box;
	margin: 0 0 10px;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	cursor: pointer;
}
ul#cg_colors_mobile li:first-child {
	border: 1px solid #a9b2b1;
}
ul#cg_colors_mobile li a {
	display: block;
	padding: 5px;
	color: #55605f;
}
ul#cg_colors_mobile li a {
	color: #55605f;
}
ul#cg_colors_mobile li.active {
	font-weight: bold;
	color: #fff;
	background: #78CFC7;
}
ul#cg_colors_mobile li.active a {
	color: #fff;
}

/* SP版：パレット切替 */
#cg_color_selector_mobile {
	margin: 10px 0;
	text-align: center;
	background: #f5f5f5;
}
#cg_color_selector_mobile .sp-replacer:hover,
#cg_color_selector_mobile .sp-container,
#cg_color_selector_mobile .sp-replacer.sp-active,
#cg_color_selector_mobile .sp-picker-container {
	border: none;
}
#cg_color_selector_mobile .palette_wrap {
	background: #fff;
	border: 1px solid #a9b2b1;
}
#cg_color_selector_mobile .palette_wrap .sp-input-container {
	margin: 0;
}
#cg_color_selector_mobile .sp-clear-enabled .sp-hue {/* ochiai20180208 */
	height: 70.5%;
}
ul.cg_palette_buttons_mobile {
	overflow: hidden;
}
ul.cg_palette_buttons_mobile li {
	width: 50%;
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
ul.cg_palette_buttons_mobile li a {
	display: block;
	color: #A9B2B1;
	background: #fff;
	padding: 5px;
	border-bottom: none;
	border-bottom: 3px solid #fff;
	font-weight: bold;
}
ul.cg_palette_buttons_mobile li.active a {
	color: #55605f;
	border-color: #78cfc7
}


/* ページ全体の場合 */
#cg__sample_css_body {
	width: 100%;
	padding: 20px 0;
}