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

/*h2, h3, h4, h5, h6, p {
	margin-top: 0;	  上マージンを削除すると、マージンを含む div からマージンがはみ出す場合があるという問題を回避できます。残った下マージンにより、後続のエレメントからは離されます。 */
/*	padding-right: 15px;
	padding-left: 15px;  div 自体ではなく div 内でエレメントの両側に余白を追加すると、ボックスモデル計算が不要になります。代わりに、両側に余白を指定した div をネストして使用することもできます。 
}*/

/*h1はheaderの中に*/

/*-------------------------★　h2見出しの設定　★-------------------------*/

h2 { /*バックは↓↓↓を使う*/
	background: linear-gradient(#cc0000, #880000);
    background: -moz-linear-gradient(top, #cc0000, #880000); /*mozilla*/
    background: -webkit-gradient(linear, center top, center bottom, from(#cc0000), to(#880000)); /*Webkit*/
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#cc0000', endColorstr='#800'); /*IE5.5以上*/
	background-color: #cc0000;
	text-align: left;
}


/*☆　見出し背景単色　左に縦ライン付　☆*/
.bgborder-red {
	background-color: #cc0000;
	border-left: 25px solid #aa0000;/*左のライン*/
	padding-left: 5px;/*ラインから文字までの余白*/
	text-shadow: 1px 1px 1px #666666;
}

/*-----☆　見出し背景単色　左方下に▽吹き出しの装飾　☆-----*/

/*☆　▽青系ここから　☆*/
.h_balloon-red {
	position: relative;
	padding: 9px;
	background-color: #cc0000;
	border-radius: 3px;/*角丸*/
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
 
.h_balloon-red:before {
	content: ''; 
	height: 0; 
	width: 0; 
	display: block; 
	border: 13px transparent solid; 
	border-right-width: 0; 
	border-left-color: #cc0000; 
	position: absolute; 
	top: 30px; 
	left: 20px;
	transform: rotate(-270deg);
	-webkit-transform: rotate(-270deg);
	-moz-transform: rotate(-270deg);
	-o-transform: rotate(-270deg);
	-ms-transform: rotate(-270deg);
}
/*☆　▽青系ここまで　☆*/


/*-----☆　見出し背景単色　文頭にボーダー(小)ｌの装飾　☆-----*/

/*☆　ｌ(小)ここから　☆*/
.h_s-border-red {
	position: relative;
	padding: 9px;
	padding-left: 15px;
	background-color: #cc0000;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
 
.h_s-border-red:before {
	content: ''; 
	height: 25px; 
	width: 2px; 
	display: block; 
	position: absolute; 
	top: 5px; 
	left: 4px; 
	background-color: #fff;
	border-left: 4px solid #fff;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
/*☆　ｌ(小)青系ここまで　☆*/


/*-----☆　見出し背景単色　文頭にボーダー(H=100%)ｌの装飾　☆-----*/

/*☆　ｌ(H=100%)ここから　☆*/
.h_border-red {
	position: relative;
	padding: 9px;
	padding-left: 15px;
	border-left: 5px solid #cc0000;
}
/*☆　ｌ(H=100%)ここまで　☆*/


/*-----☆　文頭に○*2の装飾　☆-----*/

/*☆　h2 ○ここから　☆*/
.h2_circle-red {
	position: relative;
	padding-left: 30px;
	background-color: #C30;
	/*border-bottom: 2px solid #ccc;*/
}
.h2_circle-red:before {
	content: ''; 
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px; 
	height: 12px; 
	width: 12px; 
	display: block; 
	position: absolute; 
	top: 14px; 
	left: 12px; 
	background-color: #F99;
	<!--box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;-->
	filter: alpha(opacity=50);
	-moz-opacity: 0.50;
	-khtml-opacity: 0.50;
	opacity: 0.50;
	z-index: 1;
}
.h2_circle-red:after {
	content: ''; 
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px; 
	height: 16px; 
	width: 16px; 
	display: block; 
	position: absolute; 
	top: 6px; 
	left: 4px; 
	background-color: #F55;
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset
}
/*☆　h2○ここまで　☆*/


/*-------------------------★　h3 見出し文頭デザイン基本設定　★-------------------------*/
/*☆　h3 ○*2バック無色ここから　☆*/
.h3_circle-red {
	width: 60%;
	position: relative;
	padding-left: 30px;
	border-bottom: 2px solid #d22;
	font-size: 110%;
	color: #590000;
}
.h3_circle-red:before {
	content: ''; 
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px; 
	height: 11px; 
	width: 11px; 
	display: block; 
	position: absolute; 
	top: 10px; 
	left: 10px; 
	background-color: #d66;
	<!--box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;-->
	filter: alpha(opacity=50);
	-moz-opacity: 0.50;
	-khtml-opacity: 0.50;
	opacity: 0.50;
	z-index: 1;
}
.h3_circle-red:after {
	content: ''; 
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px; 
	height: 15px; 
	width: 15px; 
	display: block; 
	position: absolute; 
	top: 2px; 
	left: 2px; 
	background-color: #d44;
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset
}
/*☆　○ここまで　☆*/


/*-----☆　文頭にボーダー(小)ｌの装飾　☆-----*/

/*☆　ｌ(小)ここから　☆*/
.h_s-border-red {
	position: relative;
	padding: 9px;
	padding-left: 15px;/*ラインから文字までの余白*/
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
 
.h_s-border-red:before {
	content: ''; 
	height: 25px; 
	width: 2px; 
	display: block; 
	position: absolute; 
	top: 5px; 
	left: 4px; 
	background-color: #fff;
	border-left: 5px solid #cc0000;/*左のライン*/
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-bottom: 1px solid #cc0000;
}
/*☆　ｌ(小)ここまで　☆*/

/*-----☆　文頭にボーダー(H=100%)ｌの装飾　☆-----*/

/*☆　ｌ(H=100%)ここから　☆*/
.h_border-red {
	position: relative;
	padding: 5px;
	padding-left: 5px;
	border-left: 5px solid #cc0000;
	border-bottom: 1px solid #cc0000;
}
/*☆　ｌ(H=100%)ここまで　☆*/