/* =================================
	BBS SAMPLE CSS
================================= */

/*
↓ hogwan からの投稿
<div class="bbs-loop bbs-tbs">
<p class="bbs-message">テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります（必須）</p>
<p class="bbs-from"><span class="bbs-handle">赤坂TBS</span><span class="bbs-age"> (33)</span><span class="bbs-gender"> ／男性</span></p>
<p class="bbs-post"><span class="bbs-date">2017年12月26日</span></p>
</div>

↓ Twitter からの投稿
<div class="bbs-loop bbs-twitter">
<blockquote class="twitter-tweet" data-cards="hidden" data-lang="ja" data-theme="light">
<p lang="ja" dir="ltr">テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります（必須）<a href="#">#ハッシュタグ</a> <a href="#">https://t.co/abcdefghij</a></p>— 赤坂TBS (@akasakaTBS) <a href="#">2017年12月26日</a></blockquote>
</div>

↓ Pager
<ul>
<li class="prev"><a href="javascript:void(0)" rel="prev">前へ</a></li>
<li class="next"><a href="javascript:void(0)" rel="next">次へ</a></li>
<li class="first"><a href="javascript:void(0)">1</a></li>
<li><a href="javascript:void(0)" rel="prev">2</a></li>
<li><b>3</b></li>
<li><a href="javascript:void(0)" rel="next">4</a></li>
<li class="last"><a href="javascript:void(0)">48</a></li>
</ul>
*/

/*	settings
============================== */

/* 背景色：honwan */
div.bbs-loop {padding:1em 1em .5em; margin:0 auto 2em; width:90%; background-color:rgba(255,255,255,0.5); box-shadow:2px 15px 25px rgba(3,47,63,0.1);}
div.bbs-loop p{padding:0 !important;}

/* 背景色：Twitter */
div.bbs-twitter {border:none; box-shadow:none;
	background-color:rgba(224,242,255,0.5);
}

@media all and (max-width: 767px) {
div.bbs-loop {width:90%;
	padding:.8em .8em .5em;
	margin:0 auto 1em;
}
div.bbs-twitter{box-shadow:none;}
}
/* 文字の行間 */
div.bbs-loop {
	line-height:1.6;
}

/* ハンドル名：hogwan */
div.bbs-tbs p.bbs-from {
	color:#419fb6;
}
/* ハンドル名：Twitter */
.bbs-from {margin:.5em 0 .3em;
	color:#004fa3;
}
/* 投稿日の色 */
.bbs-post,
blockquote.twitter-tweet a {font-size:90%; margin:0 0 .3em !important;}
div.bbs-tbs p.bbs-post span{text-align:left !important; background-color:rgba(233,80,152,0.7); padding:.1em .3em; color:#fff;}

/*	settings (Pager)
============================== */

/* 文字の色 */
div.bbs-pager { width:90%; margin:0 auto 1em;
	color:#222;
}
@media all and (max-width: 767px) {
div.bbs-pager {width:90%;}
}

/* 今いるページの色 */
div.bbs-pager ul li b {color:#e95098;
background-color:rgba(124,196,213,0.2); padding:0 .4em;
}

/* リンクの色 */
div.bbs-pager ul li a {color:#e95098;}
div.bbs-pager ul li a:hover {color:#e95098;}
div.bbs-pager ul li.pager-prev a::before,
div.bbs-pager ul li.pager-next a::after {
	background-color:#e95098;
}

/* リンクのホバー色 */
div.bbs-pager ul li a{
text-decoration:none;
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}
div.bbs-pager ul li.pager-prev a:hover::before,
div.bbs-pager ul li.pager-next a:hover::after {}

/* 次へ前へボタン、押せないときの色 */
div.bbs-pager ul li span {
	color:rgba(136,202,217,0.5);
}
div.bbs-pager ul li.pager-prev span::before,
div.bbs-pager ul li.pager-next span::after {
	background-color:rgba(136,202,217,0.5);
}

div.bbs-error {width:90%;
margin:0 auto 1.5em;
    background-color: hsla(0,0%,100%,0.9);
    padding: 5em 0;
border:2px solid #1d1d1d;background:none;
}
div.bbs-error p {font-size:140%;}
@media all and (max-width: 767px) {
div.bbs-error {padding: 10% 0; margin:0 auto;}
div.bbs-error p {font-size:120% !important;}
}