@charset "UTF-8";

/*-------------------------------------------------------------------------------------
	# sample module : ei_webdev_4
	1.page
	2.type-A
	 A-1
	 A-2
	3.type-B
	 B-1
	 B-2
	
-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------
	#1 page
-------------------------------------------------------------------------------------*/


/*-------------------------------------------------------------------------------------
	#2 type-A
-------------------------------------------------------------------------------------*/
#type_A_1,
#type_A_2 {
	margin-bottom:30px;
}
/*------------------------------
	A-1
------------------------------*/
#type_A_1 div.box {
	background:#5e7ea0 url("../images/bg_a1_box_top.png") left top no-repeat;
	width:250px;
}
#type_A_1 p.content {
	background:url("../images/bg_a1_box_bottom.png") left bottom no-repeat;
	color:#f5f5f5;
	padding:15px;
}

/*------------------------------
	A-2
------------------------------*/
#type_A_2 div.box {
	background:#365678 url("../images/bg_a2_box_top.png") left top no-repeat;
	width:250px;
}
#type_A_2 p.content {
	background:url("../images/bg_a2_box_bottom.png") left bottom no-repeat;
	color:#f5f5f5;
	padding:15px;
}

/*-------------------------------------------------------------------------------------
	#2 type-B
-------------------------------------------------------------------------------------*/
#type_B_1,
#type_B_2 {
	margin-bottom:30px;
}
/*------------------------------
	B-1
------------------------------*/
#type_B_1 div.box {
	background:#5e7ea0 url("../images/bg_b1_box_tl.png") left top no-repeat;
	width:30em;
}
#type_B_1 div.box2 {
	background:url("../images/bg_b1_box_tr.png") right top no-repeat;
}
#type_B_1 div.box3 {
	background:url("../images/bg_b1_box_bl.png") left bottom no-repeat;
}
#type_B_1 div.box4 {
	background:url("../images/bg_b1_box_br.png") right bottom no-repeat;
}
#type_B_1 p.content {
	color:#f5f5f5;
	padding:15px;
}

/*------------------------------
	B-2
------------------------------*/
#type_B_2 div.box {
	background:#365678 url("../images/bg_b2_box_tc.png") left top repeat-x;
	width:30em;
}
#type_B_2 div.box2 {
	background:url("../images/bg_b2_box_tl.png") left top no-repeat;
}
#type_B_2 div.box3 {
	background:url("../images/bg_b2_box_tr.png") right top no-repeat;
}
#type_B_2 div.box4 {
	background:url("../images/bg_b2_box_bl.png") left bottom no-repeat;
}
#type_B_2 div.box5 {
	background:url("../images/bg_b2_box_br.png") right bottom no-repeat;
}
#type_B_2 p.content {
	color:#f5f5f5;
	padding:15px;
}

/*-------------------------------------------------------------------------------------
	#3 type-C
-------------------------------------------------------------------------------------*/
#type_C_1 {
	margin-bottom:30px;
}

#type_C_1 div.box {
	background-color:#5e7ea0;
	padding:10px;
	width:30em;
}
#type_C_1 div.box:before {
	background:url("../images/bg_b1_box_tr.png") right top no-repeat;
	content:url("../images/bg_b1_box_tl.png");
	display:block;
	height:10px;
	font-size:1px;
	margin:-10px -10px 0 -10px;
}
#type_C_1 div.box:after {
	background:url("../images/bg_b1_box_br.png") right bottom no-repeat;
	content:url("../images/bg_b1_box_bl.png");
	display:block;
	height:10px;
	font-size:1px;
	margin:-10px;
	padding-top:10px;
}
#type_C_1 p.content {
	color:#f5f5f5;
	padding:5px;
}