@charset "utf-8";


.related_article{
	margin: 1.8em 0;
}
.related_article .inbox{
  padding-left:25%;
}
.related_article p.ttl{
	margin: 0 0 0.1em;
	font-size:1em;
	font-weight: bold;
}
.related_article .ttl:before{
	content:'関連記事';
	font-size:0.7em;
	font-weight:bold;
	color:#fff;
	background:#111;
	width:5em;
	display:inline-block;
	padding:0.2em;
	position:relative;
	top:-2px;
	text-align:center;
	margin-right:0.5em;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
}
.related_article.labelnone .ttl:before{
	content:none;
}
.related_article .date{
	font-size:0.8em;
}
.related_article .thum{
	width: 22%;
	float:left;
}
.related_article .thum img{
  width:100%;
  margin-bottom: 0;
}
.related_article a{
	color:#333;
	background: #FFF;
	border: 1px solid #eee;
	box-shadow:1px 1px 0 #efefef;
	text-decoration:none;
	display:block;
	padding:0.9em;
	overflow: hidden;
}
.related_article a:hover{
	color:#666;
	background:lightyellow;
}


/* ショートコードで吹き出しデザイン */
.voice{
  margin:1em 0 1.3em;
  font-size:0.95em;
}

.voice .voicecomment{
  border:3px solid #eee;
  color: #444;
  padding: 2.5%;
  position:relative;
  width:87%;
  border-radius:5px;
}
.voice.l .voicecomment{
  float:right;
}
.voice.r .voicecomment{
  float:left;
}

.voice.l .voicecomment:before{
    content: '';
    position: absolute;
    border-right: 8px solid #eee;
    border-bottom: 8px solid transparent;
    border-top: 8px solid transparent;
    top: 10px;
    left: -11px;
  }
  .voice.l .voicecomment:after{
    content: '';
    position: absolute;
    border-right: 10px solid #fff;
    border-bottom: 8px solid transparent;
    border-top: 8px solid transparent;
    top: 10px;
    left: -7px;
  }
.voice.r .voicecomment:before{
    content: '';
    position: absolute;
    border-left: 8px solid #eee;
    border-bottom: 8px solid transparent;
    border-top: 8px solid transparent;
    top: 10px;
    right: -11px;
  }
  .voice.r .voicecomment:after{
    content: '';
    position: absolute;
    border-left: 10px solid #fff;
    border-bottom: 8px solid transparent;
    border-top: 8px solid transparent;
    top: 10px;
    right: -7px;
  }

.voice .voicecomment h2,
.voice .voicecomment h3,
.voice .voicecomment h4,
.voice .voicecomment h5{
  margin:10px 0!important;
  padding:0;
}
.voice .voicecomment p{
  margin-bottom:1em;
}
.voice .voicecomment p:last-child{
  margin-bottom:0;
}
.voice .icon{
  width:10%;
  text-align:center;
}
.voice.l .icon{
  float:left;
}
.voice.r .icon{
  float:right;
}
.voice .icon img{
  border-radius:50%;
  margin:0;
  box-shadow:  0 0 8px rgba(0, 0, 0, 0.15);
  border: 3px solid #fff;
}
.voice.icon_red .icon img{
border-color: #FF4E4E;
}
.voice.icon_blue .icon img{
border-color: #50B4DE;
}
.voice.icon_yellow .icon img{
border-color: #faee00;
}
.voice.icon_black .icon img{
border-color: #222;
}
.voice .icon .name{
  font-size: 0.65em;
  padding:0.4em 0;
}
.voice.big .icon{
  width:18%;
}
.voice.big .voicecomment{
  width:79%;
}



@media (max-width: 480px) {
  .related_article{
      font-size:0.8em;
  }
  .related_article .inbox{
    padding-left: 32%;
  }

  .related_article .ttl:before{
      content:'関連';
      width:3em;
  }

  .related_article .thum{
      width: 30%;
  }

  .related_article a{
      padding:0.6em;
  }
}