@charset "utf-8";
/* CSS Document */


.wrap-materials {
	width:640px;
	margin:0 auto;
	text-align:left;
}
.wrap-materials h1 {
	margin:0 0 15px 0;
	padding:0 0 0 10px;
	font-size:18px;
}
.wrap-materials #materials-photo {
	float:left;
	width:133px;
}
.wrap-materials table {
	float:right;
	width:490px;
	border-collapse:collapse;
}
.wrap-materials th,.wrap-materials td {
	padding:5px;
	border:1px solid #ccc;
}
.wrap-materials th {
	text-align:center;
}
.wrap-materials td {
	vertical-align:top;
}
.wrap-materials .col01 {
	width:50%;
}
.wrap-materials .col02 {
	width:50%;
}
.wrap-materials ul {
	margin:10px 0 0 0;
	padding:8px 5px;
	background:#f5f5f5;
}
.wrap-materials li {
	margin:0 0 0 20px;
	list-style:disc;
}
.wrap-materials #clswin {
	margin:10px 0 0 0;
	text-align:center;
}
.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix {
	display: inline-block;
	min-height:1%;
}
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}




/*------------------------------kenko*/

#kenko-materials h1 {
	color:#702304;
	border-left:5px solid #702304;
}
#kenko-materials th {
	background:#f1e5b9;
	font-weight:normal;
}



/*------------------------------honey*/

#honey-materials h1 {
	color:#e28000;
	border-left:5px solid #e28000;
}
#honey-materials th {
	background:#ffe4bb;
	font-weight:normal;
}



/*------------------------------cosme*/

#cosme-materials h1 {
	color:#625300;
	border-left:5px solid #625300;
}
#cosme-materials th {
	background:#fff9b3;
	font-weight:normal;
}
#cosme-materials .col01 {
	width:80%;
}
#cosme-materials .col02 {
	white-space:nowrap;
}


#materials-detail {
    float:right;
    width:490px;
}
#materials-detail table {
    margin:10px 0 20px 0;
}
#materials-detail .setItemName {
    font-weight: bold;
}


@media screen and (max-width: 640px) {
    /* reset modules */
    .w640 {
        width: auto !important;
    }
    .pt12 {
        padding-top: 0 !important;
    }
    /* style for smartphone */
    #containers {
        box-sizing: border-box;
        width: 100%;
        padding: 0 3%;
    }
    #materials-detail {
        width: 100%;
    }
    .wrap-materials {
        width: 100%;
    }
    .wrap-materials #materials-photo {
        float: none;
        width: 100%;
        text-align: center;
    }
    .wrap-materials table {
        width: 100%;
    }
}