@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 { /*バックは↓↓↓を使う*/
	height: auto;
	vertical-align: top;
	font-size: 120%;
	font-weight: normal;
	color: #ffffff;
	padding: 10px 15px;上,左,下,右
	text-align: left;
	text-shadow: 1px 1px 1px #666666;
	/*border: 1px #ffffff solid; 枠線の装飾 */
	box-shadow: 1px 1px 5px #666666;
	line-height: 1.2;
}


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

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

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


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

/*☆　ｌ(小)青系ここから　☆*/
.h_s-border{
	position:relative;
	padding:9px;
	padding-left:15px;
	background-color: #51A2C1;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}
 
.h_s-border: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{
	position:relative;
	padding:9px;
	padding-left:15px;
	border-left: 5px solid #51A2C1;
}
/*☆　ｌ(H=100%)青系ここまで　☆*/


/*-------------------------★　見出し文頭デザイン基本設定　★-------------------------*/
/*-----☆　文頭に○*2の装飾　☆-----*/

/*☆　○青系ここから　☆*/
.h_circle{
	position:relative;
	padding-left:30px;
	border-bottom:2px solid #ccc;
	font-weight: bold;
	font-size: 22px;
	line-height: 38px;
}
.h_circle:before{
	content:''; 
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px; 
	height:12px; 
	width:12px; 
	display:block; 
	position:absolute; 
	top:14px; 
	left:7px; 
	background-color:#6B0CE8;
	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;
}
.h_circle:after{
	content:''; 
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px; 
	height:15px; 
	width:15px; 
	display:block; 
	position:absolute; 
	top:7px; 
	left:2px; 
	background-color:#00A8FF;
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset
}
/*☆　○青系ここまで　☆*/


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

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

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

/*☆　ｌ(H=100%)青系ここから　☆*/
.h_border{
	position:relative;
	padding:9px;
	padding-left:15px;
	font-weight: bold;
	font-size: 18px;
	background-color: #ccc;
	border: 1px dashed #51A2C1;
	border-left: 5px solid #51A2C1;
}
/*☆　ｌ(H=100%)青系ここまで　☆*/



/*-------------------------★　h3,h4,h5 見出しの設定　★-------------------------*/

.contents h3 {/*下に区切り線*/
	height: auto;
	margin-bottom: 10px;
	margin-top: 5px;
	text-align: left;
	font-size: 110%;
	font-weight: normal;
	text-shadow: 1px 1px 1px #ccc;
}

.contents h4 {/*カート製品名*/
	vertical-align: top;
	font-weight: bold;
	color: #009999;
	padding: 6px 0px;/*上,左,下,右*/
	text-align: left;
	text-shadow: 1px 1px 1px #eeeeee;
	line-height: 1.3;
}

.contents h5 {/*角丸グラデーション緑色のボタン：場所は中央*/
	width: 300px;
	text-align: center;
	margin: 15px auto 0 auto;
	font: #666666, bold, 130%;
	text-shadow: 1px 1px 1px #bbbbbb;
	padding: 10px;
/*グラデーション*/    
    background: -o-linear-gradient(top, #80FF00, #006400);
    background:-webkit-gradient(linear, left top, left bottom, from(#80FF00), to(#006400));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80FF00', endColorstr='#006400', GradientType=0)";
    background: linear-gradient(to bottom, #80FF00, #006400);
/*角丸*/
    border-radius: 30px;
/*影*/
    box-shadow: 1px 1px 5px 0px;
    -webkit-box-shadow: 1px 1px 5px 0px #bbbbbb;
}

.contents h5 a {
	color: #fff;
	text-decoration: none;
}