@charset "utf-8";

/*----------------------------------------------------
	Common
----------------------------------------------------*/
#eco-name,
#eco-tagname {
	padding: 10px;
	font-family: verdana,"Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	box-sizing: border-box;
	}
.eco-lead {
	padding: 10px 0;
	font-size: 13px;
	text-align: left;
	border-bottom: 1px solid #404040;
	}
.eco-list {
	position: relative;
	display: -webkit-flex;
	display: flex;
	width: 100%;
	min-height: 100px;
	margin: 10px 0;
	}
.eco-list .eco-list-img {
	width: 129px;
	height: 100px;
	box-sizing: border-box;
	border: 1px solid #aaa;
	}
.eco-list .eco-list-txt {
	display: table;
	width: calc(100% - 130px);
	box-sizing: border-box;
	}
.eco-list dl {
	display: table-cell;
	vertical-align: middle;
	margin: 0;
	padding: 4px;
	color: #404040;
	font-size: 13px;
	text-align: left;
	}
.eco-list dl dt,
.eco-list dl dd {
	margin: 0;
	padding: 0;
	}
.eco-list dl dt {
	padding: 0 0 10px;
	font-weight: bold;
	}
.eco-list dl dd a {
	position: absolute;
	right: 0;
	bottom: 0;
	display: block;
	}
.cotton { background: #f6f5f1; }
.cotton dt { color: #667f35; }
.linen { background: #f9f9f7; }
.linen dt { color: #775c48; }
.linen dt span { color: #0000cc; }
.rayon { background: #fff4fa; }
.rayon dt { color: #6c48b7; }
.natural { background: #eff4fa; }
.natural dt { color: #360; }
.labo { background: #f5f4fa; }
.labo dt { color: #3b6d84; }
.eco-all,
.eco-note {
	padding: 10px 0;
	border-top: 4px solid #abd548;
	}
.eco-all-title {
	padding: 4px;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	box-sizing: border-box;
	border: 3px double #fff;
	background: rgb(255, 102, 0);
	}
.eco-all-table {
	width: 100%;
	margin: 5px 0;
	padding: 6px;
	box-sizing: border-box;
	border: 1px solid #c0c0c0;
	}
.eco-all-table td {
	vertical-align: top;
	width: 25%;
	padding: 10px;
	box-sizing: border-box;
	}
.eco-all-table td+td { border-left: 1px dotted #c0c0c0; }
.eco-all-table td img {
	display: block;
	margin: 0 0 5px;
	border: 1px solid #c0c0c0;
	}
.eco-all-table td p img { border: none; }
.eco-all-table td strong {
	color : #069;
	font-size : 9pt;
	}
.eco-all-table td p {
	padding: 10px 0 0;
	font-size : 8pt;
	}
.eco-clip {
	height: 16px;
	margin: 0 0 20px;
	padding: 0 0 0 20px;
	color: #900;
	font-size : 9pt;
	line-height: 16px;
	background: url(../product/eco/bullet122.gif) no-repeat 0 0;
	}
.eco-note { text-align: center; }
.eco-note strong {
	color: #cc45b3;
	font-size: 11pt;
	}
.eco-note ul {
	width: 98%;
	margin: 0 auto;
	padding: 10px 0 0 20px;
	font-size: 10pt;
	text-align: left;
	box-sizing: border-box;
	}
.eco-note ul li {
	margin: 0 0 10px;
	list-style: disc outside;
	}

/*----------------------------------------------------
	Toppage
----------------------------------------------------*/
.eco-group {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	width: 480px;
	margin: 30px auto;
	}
.eco-group div {
	width: 224px;
	margin: 0 0 10px;
	font-size : 10pt;
	box-sizing: border-box;
	border: 1px solid silver;
	}
.eco-group div a {
	display: block;
	width: 100%;
	padding: 5px 0 0;
	color: #404040;
	font-size: 9pt;
	text-decoration: none;
	}
.eco-group div img {
	display: block;
	width: 210px;
	height: auto;
	margin: 0 auto;
	}
.eco-group div span { display: block; }
.eco-group div span.comment { padding: 5px 2px; }
.eco-group div span.example {
	display: block;
	padding: 2px;
	font-size : 8pt;
	text-align: center;
	background: #c6e283;
	}
.eco-group div.eco-group-labo {
	width: 452px;
	margin: 0;
	}
.eco-group div.eco-group-labo img { width: 440px; }
.eco-group div.eco-group-labo strong { color: #f00; }
.eco-group div.eco-group-labo span.example { background: #d9d9ff; }

/*----------------------------------------------------
	Sample
----------------------------------------------------*/
.ecsp-lead {
	width: 500px;
	margin: 0 auto;
	padding: 10px 0;
	font-size: 13px;
	text-align: left;
	}
.ecsp-lead strong {
	display: block;
	padding: 0 0 5px;
	}
strong.grn { color: #667f35; }
strong.ble { color: #069; }
strong.brn { color: #775c48; }
strong.plb { color: #6c48b7; }
strong.plr { color: #909; }
strong.bl2 { color: #00c; }
.ecsp-note {
	width: 100%;
	padding: 8px 42px;
	text-align: left;
	box-sizing: border-box;
	border: 1px solid #c0c0c0;
	}
.ecsp-note strong { font-size: 12pt; }
.ecsp-note-cotton { background: url(../product/eco/note_01.gif) #f2e9df repeat-y; }
.ecsp-note-linen { background: url(../product/eco/note_01.gif) #e2dcdc repeat-y; }
.ecsp-note-rayon { background: url(../product/eco/note_01.gif) #f3e9f4 repeat-y; }
.ecsp-note-natural { background: url(../product/eco/note_01.gif) #dde7de repeat-y; }
.ecsp-note-labo-d1 { background: url(../product/eco/note_01.gif) #f3ecdc repeat-y; }
.ecsp-note-labo { background: url(../product/eco/note_01.gif) #f1f3eb repeat-y; }
.ecsp-note-cotton strong,
.ecsp-note-cotton .ecsp-code, 
.ecsp-note-linen strong,
.ecsp-note-linen .ecsp-code,
.ecsp-note-labo-d1 strong,
.ecsp-note-labo-d1 .ecsp-code,
.ecsp-note-labo strong,
.ecsp-note-labo .ecsp-code { color: #630; }
.ecsp-note-rayon strong,
.ecsp-note-rayon .ecsp-code { color: #606; }
.ecsp-note-natural strong,
.ecsp-note-natural .ecsp-code { color: #316266; }
.ecsp-table {
	margin: 10px auto;
	border-collapse: separate;
	border-spacing: 10px;
	}
.ecsp-table td {
	vertical-align: top;
	width: 128px;
	padding: 5px 0;
	text-align: center;
	box-sizing: border-box;
	border: 1px solid #c0c0c0;
	background: #fff;
	}
.ecsp-table td p {
	padding: 2px 4px;
	font-size: 13px;
	text-align: left;
	box-sizing: border-box;
	}
.ecsp-code {
	padding: 0 0 10px;
	text-align: center;
	}