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

/******************************************************************************************
カテゴリータイトル
******************************************************************************************/
.category_main_title {
	text-align: center;
	height: 8%;
	width: 100%;
	margin: 0 0 5%;
	padding: 3% 0 3%;
}
#category_music img, #category_movie img, #category_book img, #category_travel img, #category_diary img,#category_work img, #category_guitar img, #category_live img, #category_comic img { width: 20%; }

/******************************************************************************************
記事の幅
******************************************************************************************/
#page_wrap {
	margin: 0 0 5%;
	padding: 5%;
}
.page_article { width: 100%; margin:0 0 20%; }
.page_article img { width: 100%; height: 100%; }
/******************************************************************************************
ページ送りの要素
******************************************************************************************/
.prevnext { margin-bottom: 10%; }
.prev, .next { margin-bottom: 5%; }
.prev a { float: none; display: block; }
.next a { float: none; display: block; }
#page_wrap p.prev a, #page_wrap p.next a { font-size: 10px; padding: 2%; }
/******************************************************************************************
FontAwesomeのアイコンの要素
******************************************************************************************/
.fa-chevron-left { margin-right: 2px; }
.fa-chevron-right { margin-left: 2px; }

/******************************************************************************************
SNSボタンの要素
******************************************************************************************/

.share li {
  float : left;
  width : 100%;
  margin:0 2% 3% 0;}
.share li a {border-radius:4px;}

/******************************************************************************************
リンク枠の要素
******************************************************************************************/

.page_article .em-link {
  font-size: 12px;
  margin: 9px 0 4px;
  padding: 4px 2px;
}

/******************************************************************************************
LINEバナー要素
******************************************************************************************/
.line_banner { margin-bottom:5%; }
.line_banner img { width:100%; }
/******************************************************************************************
個別投稿記事内のお勧めリンクボックスの要素
******************************************************************************************/
.reco_box { width: 95.5%; padding: 2% 2% 5%; }
.reco_box_img { width: 170px; height: 170px; margin: 0 auto 5%; }
.reco_box_img img { width: 170px; height: 170px; }
.reco_box_amazon { padding: 10px 0 10px 0; }

/******************************************************************************************
関連記事をランダムで4つ表示する要素
******************************************************************************************/
.blog_rerated_h2 {
	text-align: center;
	height: 6%;
	width: 100%;
	margin: 0 0 5%;
	padding: 2% 0 2%;
}
.blog_rerated_h2 h2 { font-size: 2.0em; }
.blog_reratad_box { margin-bottom: 8%; }
.blog_reratad_box li { 
	width:100%;
	padding: 3%;
	margin : 0 0 5% 0;
	float: none;
	text-align: center;
}
.blog_reratad_img { width:180px; height: 180px; margin: 0 auto; }
/******************************************************************************************
吹き出し要素
******************************************************************************************/
.balloon {
	margin-bottom: 2.5em;
}
.balloon figure {
	width: 50px;
	height: 50px;
}
.balloon-image-description {
	padding: 1px 0 0;
	font-size: 8px;
	line-height: 10px;
}
.balloon-image-left {
	margin: 0 10px 0 0;
}
.balloon-image-right {
	margin: 0 0 0 10px;
}
.balloon-text-right,.balloon-text-left {
	padding: 8px;
	margin-top: 0;
	max-width: -webkit-calc(100% - 80px);
	max-width: calc(100% - 80px);
}
/* 吹き出しの三角部分 */
.balloon-text-right:before {
	top: 9px;
}
.balloon-text-right:after {
	top: 9px;
}
.balloon-text-left:before {
	top: 9px;
}
.balloon-text-left:after {
	top: 9px;
}
/******************************************************************************************
クィックカテゴリー
******************************************************************************************/
.quick_category { width:100%; margin-bottom:10%;}
.quick_category ul li { float:none; width:100%; margin: 0 auto; }
#q_cate_01, #q_cate_02, #q_cate_03, #q_cate_04, #q_cate_05, #q_cate_06, #q_cate_07, #q_cate_08, #q_cate_09 { margin:0 0 3% 0; }
#q_cate_01 a, #q_cate_02 a, #q_cate_03 a, #q_cate_04 a, #q_cate_05 a, #q_cate_06 a, #q_cate_07 a, #q_cate_08 a, #q_cate_09 a { width:100%; }