
/* ----------------------------------------------- */
/** 記事本文 */

.article-body {
	clear: both;
	background-color: transparent;
	padding: 10px 10px 5px;
	line-height: 170%;
	font-size: 130%;
	overflow: hidden;
}



.article-body-inner {
}

/*** 続きを読む */
.article-body span.article-continue {
	display: block;
	margin-top: 1em;
}

.article-body .article-body-more,
.article-body .article-body-private {
	clear: both;
	margin-top: 1em;
}


.article-body h1 {
	padding: 5px 0 5px 5px;
	border-bottom: solid 1px #878787;
	border-left: solid 7px #878787;
	margin: 10px 0;
	font-size: 180%;
}
.article-body .{
	padding: 5px 0 5px 5px;
	margin: 10px 0;
	border-bottom: solid 1px #878787;
	border-left: solid 7px #878787;
	font-size: 150%;
}



.article-body h3 {
    position: relative;
    color: #000000 ;
    background: #f8f8f8;
    font-size: 22pt ;
    line-height: 1;
    margin: 20px -10px 20px -10px;
    padding: 10px 5px 10px 12px;
    border-top:3px solid #bbb;
}
.article-body h3:after, sample2:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #bbb;
}
.article-body h3:after {
    left: 0;
    border-right: 5px solid #bbb;
}
.article-body h3:before {
    right: 0;
    border-left: 5px solid #bbb;
}







.article-body h4{
	position:relative;
	padding:1px;
	padding-left:3px;
	font-weight: bold;
	font-size: 24px;
}
 
.article-body h4:before{
	content:''; 
	height:15px; 
	width: 100%;
	display:block; 
	position:absolute; 
	top:18px; 
	left:0px; 
	background-color:#ccc;
	filter:alpha(opacity=20);
	-moz-opacity:0.20;
	-khtml-opacity: 0.20;
	opacity:0.20;
	box-shadow: 0px 3px 3px 3px rgba(255,255,255, 0.3) inset;
}




.article-body h5{
	position:relative;
	padding:1px;
	padding-left:8px;
	font-weight: bold;
	font-size: medium;
}
 
.article-body h5:before{
	content:''; 
	height:5px; 
	width: 100%;
	display:block; 
	position:absolute; 
	top:21px; 
	left:0px; 
	background-color:#ccc;
	filter:alpha(opacity=20);
	-moz-opacity:0.20;
	-khtml-opacity: 0.20;
	opacity:0.20;
	box-shadow: 0px 3px 3px 3px rgba(255,255,255, 0.3) inset;
}



.article-body h6 {
	font-size: 105%;
	margin: 10px 0;
}

.article-body ol {
	margin: 10px 20px;
}
.article-body ul {
	margin: 10px 15px;
}

.article-body dt {
	font-weight: bold;
}

.article-body dd {
	margin-left: 1em;
}


/* 05.アメリカンな(?)吹き出し */
.article-body h7{
	position:relative;
	padding:5px 20px;
	font:bold 28px/1.6 Arial, Helvetica, sans-serif;
	color:#333;
	background:#fff;
	text-shadow:
		1px 1px 0 #fff,
		2px 2px 0 #999;
	border-top:#333 solid 3px;
	border-bottom:#333 solid 3px;
    background-image: -webkit-gradient(linear, left top, right bottom,
			from(			rgba(255, 255, 255, 0.0)), 
			color-stop(0.4, rgba(255, 255, 255, 0.0)), 
			color-stop(0.4, rgba(0, 0, 0, 0.1)), 
			color-stop(0.6, rgba(0, 0, 0, 0.1)), 
			color-stop(0.6, rgba(255, 255, 255, 0.0)),
			to(				rgba(255, 255, 255, 0.0))
			);
	background-image: -webkit-linear-gradient(top -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-image: -moz-linear-gradient(top -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-image: -o-linear-gradient(top -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-image: linear-gradient(to bottom -45deg,
			transparent 40%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(0, 0, 0, 0.1) 60%,
            transparent 60%
			);
	background-size:4px 4px;
}


/* 04.吹き出し */
.article-body h8{
	position:relative;
	margin:0 15px;
	padding:10px 20px;
	font:bold 24px/1.6 Arial, Helvetica, sans-serif;
	color:#333;
	border:#333 solid 3px;
	border-radius:18px;
	background:#fff;
	box-shadow:
		-7px -5px 0 0 #e8e8e8 inset,
		2px 3px 0 0 #000;
}
h8:before{
	content:" ";
	position:absolute;
	top:100%;
	left:14px;
	width:0;
	height:0;
	border-width:20px;
	border-style:solid;
	border-color:transparent;
	border-top-color:#333;
}
h8:after{
	content:" ";
	position:absolute;
	bottom:-27px;
	left:18px;
	width:0;
	height:0;
	border-width:14px;
	border-style:solid;
	border-color:transparent;
	border-top-color:#e8e8e8;
}


blockquote {
  background: #eee url(http://www.webcreatorbox.com/sample/images/quote.gif) no-repeat 10px 10px;
    padding: 25px;
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Meiryo,"メイリオ",Helvetica,Sans-Serif;
}




/*--------------------
 吹き出しを作る
--------------------*/
/* 全体のスタイル */
.kaiwa {
  margin-bottom: 120px;
}
/* 左画像 */
.kaiwa-img-left {
  margin: 0;
  float: left;
  width: 60px;
  height: 60px;
}
/* 右画像 */
.kaiwa-img-right {
  margin: 0;
  float: right;
  width: 60px;
  height: 60px;
}
.kaiwa figure img {
  width: 100%;
  height: 100%;
  border: 1px solid #aaa;
  border-radius: 50%;
  margin: 0;
}
/* 画像の下のテキスト */
.kaiwa-img-description {
  padding: 1px 0 0;
  font-size: 10px;
  text-align: center;
}
/* 左からの吹き出しテキスト */
.kaiwa-text-right {
  position: relative;
  margin-left: 80px;
  padding: 10px;
  border: 1px solid #aaa;
  border-radius: 10px;
}
/* 右からの吹き出しテキスト */
.kaiwa-text-left {
  position: relative;
  margin-right: 80px;
  padding: 10px;
  border: 1px solid #aaa;
  border-radius: 10px;
}
p.kaiwa-text {
  margin: 0 0 20px;
}
p.kaiwa-text:last-child {
  margin-bottom: 0;
}
/* 左の三角形を作る */
.kaiwa-text-right:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #aaa;
  top: 15px;
  left: -20px;
}
.kaiwa-text-right:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #fff;
  top: 15px;
  left: -19px;
}
/* 右の三角形を作る */
.kaiwa-text-left:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #aaa;
  top: 15px;
  right: -20px;
}
.kaiwa-text-left:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #fff;
  top: 15px;
  right: -19px;
}
/* 回り込み解除 */
.kaiwa:after,.kaiwa:before {
  clear: both;
  content: "";
  display: block;
}