@charset "shift_jis";
/* CSS Document */

#main > div {
	width: auto;
}
p {
	color: #fff;
	line-height: 1.2em;
}
h6 {
	font-size: 1.2em;
	line-height: 1.5em;
}
h6:before {
	font-size: 0.8em;
	content: "// ";
}

#mattopedia ul.flex {
	display: flex;
	flex-wrap: wrap;
    justify-content: space-between;
	display: -webkit-flex;
	-webkit-flex-wrap: wrap;
    -webkit-justify-content: space-between;
    margin: 10px auto;    
}
#mattopedia ul.flex li {
	width: 246px;
    min-height: 300px;
	border: 1px solid #ccc;
	padding: 5px;
	margin-bottom: 30px;
}
#mattopedia ul.flex li h5 {
    margin: 5px 0;
    line-height: 20px;
	text-align: center;
	font-size: 1em;
	border-bottom: 1px dashed #888;
}
#mattopedia ul.flex li h5 span {
    display: block;
    font-size: 0.7em;
}
#mattopedia ul.flex li p {
	color: #282828;
	margin: 0 3px;
	line-height: 19px;
}

/* �F�w�� */
#tech_matto ul.flex li {
	background: #f9efed;
}
#tech_matto ul.flex li h5 {
	color: #BF402D;
}
#tech_sukebe ul.flex li {
	background: #eaf0ef;
}
#tech_sukebe ul.flex li h5 {
	color: #76A09C;
}


/* tech_matto */
#tech_matto {
	clear: both;
	margin: 30px auto 70px;
}
#tech_matto h3 {
	font-size: 26px;
	font-weight: bold;
	line-height: 30px;
	color: #BF402D;
	border-bottom: 3px solid #BF402D;
	margin-bottom: 10px;
}
#tech_matto h3 span {
	float: right;
	font-size: 14px;
}
#tech_matto .bnr_btn {
	width: 80%;
	line-height: 64px;
	text-align: center;
	margin: 0 auto;
	border: 2px solid #ccc;
	background: #F0E0A5;
}
#tech_matto .bnr_btn a {
	display: block;
	color: #BF402D;
	font-size: 1.6em;
	font-weight: 700;
	background: url(../img/system/bnr_btn.png) no-repeat 97%;
}

/* tech_sukebe */
#tech_sukebe {
	clear: both;
	margin: 30px auto 70px;
}
#tech_sukebe h3 {
	font-size: 26px;
	font-weight: bold;
	line-height: 30px;
	color: #76A09C;
	border-bottom: 3px solid #76A09C;
	margin-bottom: 10px;
}
#tech_sukebe h3 span {
	float: right;
	font-size: 14px;
}