@charset "utf-8";

/* ------------------------------------------------------------

	共通

------------------------------------------------------------ */

#material_detail p {
	margin-bottom: 20px;
}


/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media only screen and (max-width: 767px) {
	/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media only screen and (max-width: 479px) {
	/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */



}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


/* ------------------------------------------------------------

	見出し

------------------------------------------------------------ */

.headline01 {
	color: #673503;
	font-size: 30px;
	font-weight: 400;
}

.headline02 {
	position: relative;
}

.headline02 .headline02__inner {
	display: inline;
	padding: 5px 10px;
	border-radius: 14px;
	color: #FFFFFF;
	background: #ff8000;
	font-size: 1em;
	font-weight: 400;
	position: relative;
}
.headline02::before {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: 2px;
	background: #ff8000;
}



/* ------------------------------------------------------------

	一覧

------------------------------------------------------------ */

#material_list {
	margin-bottom: 40px;
}

#material_list .six {
	width: 48.5%;
	max-width: 48.5%;
	margin-right: 3%;
	float: left;
}

#main h4 {
	font-size: 1.125em;
	color: #331A00;
	margin-bottom: 20px;
	line-height: 150%;
}

#material_list h4 {
	margin-bottom: 50px;
}

#main #material_list p {
	line-height: 175%;
	margin-bottom: 0px;
}

#material_list .rslides img {
	width: 100%;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media only screen and (max-width: 767px) {
	/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media only screen and (max-width: 479px) {
	/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

	#material_list .six {
		width: 100%;
		max-width: 100%;
		margin-right: 0%;
		float: none;
	}

}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */




/* ------------------------------------------------------------

	詳細

------------------------------------------------------------ */

#material_detail {
	margin-bottom: 40px;
}

#main .gray_border {
	padding: 20px 20px 0px;
	margin-bottom: 20px;
}

#main .six {
	width: 48.5%;
	max-width: 48.5%;
	margin-right: 3%;
	float: left;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media only screen and (max-width: 767px) {
	/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */



}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media only screen and (max-width: 479px) {
	/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

	#main .six {
		width: 100%;
		max-width: 100%;
		margin-right: 0%;
		float: none;
	}

}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */




/* ------------------------------------------------------------

	用途例

------------------------------------------------------------ */


.youto_area {
	clear: both;
	margin-bottom: 10px;
	padding: 8px 10px;
	border: 1px solid #CCC;
}

.youto_area .icon_youto {
	padding-bottom: 0px;
	margin-bottom: 0px;
	background: url(../images/icon_youto.gif) no-repeat left top;
	padding-left: 70px;
}

#main p.icon_youto {
	margin-bottom: 0px;
}

.bg_yellow {
	background: #FFFEE5;
}

.bg_yellow .icon_youto {
	text-decoration: underline;
	color: #0066CC;
}

.bg_yellow .icon_youto {
	cursor: pointer;
}

.detail {
	clear: both;
	margin-left: 0px;
	display: none;
	zoom: 1;
	padding: 20px 15px 10px;
	font-size: 0.875em;
}

.detail.hide li {
	float: left;
	width: 32%;
	max-width: 32%;
	margin-right: 2%;
}

.detail.hide li img {
	display: block;
	margin-bottom: 5px;
}

.close {
	text-align: center;
	color: #FFFFFF;
	cursor: pointer;
	border: 1px solid #ddd;
	display: block;
	background: #666;
	padding: 5px 10px;

}

.icon_material {
	background: url(../material/images/icon_material.gif) no-repeat left top;
	padding-left: 70px;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media only screen and (max-width: 767px) {
	/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media only screen and (max-width: 479px) {
	/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

	.detail.hide li {
		float: none;
		width: 100%;
		max-width: 100%;
		margin-right: 0;
		margin-bottm: 10px;
	}

}