@charset "utf-8";
html {
    font-family: helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif;
}
* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin:0;
    padding:0;
}
.body_container {
    position: relative;
    width:98%;
    height:100%;
    margin:0 auto;
}

/* レンダリング領域 */
.render_main {
    position:relative;
    width:100%;
    height:100%;
}
.render_div {
    position:relative;
    width:100%;
    height:0;

    border: 1px solid #555;
}

/* カラー領域 */
.color_wrap {
    position: relative;
    margin: 0 auto;
}

.color_frame {
    position: relative;
    width: auto;
    height: 100%;
    margin: 0 auto;
}

.color_name_container {
    position: relative;
    margin: 0 auto;
    margin: 5px;
    width: 100%;
    font-size: 12px;
    text-align: center;
}
/* カラーパレット */
.color_list_container {
	clear:left;
    position:relative;
	width:95%;
	margin:0 auto;
    overflow: hidden;
}

.color_list {
    position:relative;
	float:left;
	left:50%;
    margin:0 auto;
	margin-top:20px;
    list-style: none;
	padding-right:0;
	margin-right:0;
}

.color_list li {
     position:relative;
     float:left;
	 left:-50%;
     padding: 0 0px 4px;
     margin: 0 4px 4px 0;
     height: 32px;
     list-style: none;
     cursor: pointer;
}

.color_list li:hover {
    border-bottom: 4px solid #ccc;
}

.ctip {
    position: relative;
    width: 68px;
    height: 24px;
    border: 1px solid #ccc;
    margin: 0;
}

.active_color {
    border-bottom: 4px solid #ccc;
}

/* グレード名 */
.grade_name {
    position:relative;
    margin:0 auto;
	margin-top:20px;
    text-align: center;
    font-size: 5vw;
}