@charset 'UTF-8';
/*******************************************************************************

    スタイル定義

*******************************************************************************/

/*
記事共通
***************/
.article
{
	margin: 2em 0 4em;
}
article:after
{
	content: ' ';
	display: block;
	float: left;
}
.article .article-header
{
	margin: 1em 0;
	position: relative;
}

.article .article-header span
{
	display: inline-block;
	vertical-align: middle;
}

.article .article-header .protected
{
	padding: .4em 1em;
	background-color: red;
	color: yellow;
	border-radius: 5px;
	font-size: 55%;
	margin-right: .5em;
	line-height: 1.25;
	text-shadow: none;
}

.article .article-header  .title
{
}
.article .article-header  .date
{
	position: absolute;
	top: 1.25em;
	right: .75em;
	font-size: 80%;
}

.article .article-header  .notify 
{
  font-weight: bold;
  font-size: 70%;
  padding: .25em .5em;
  background-color: #e1e1e1;
  border-radius: 5px;
  color: white;
  margin: 0 .75em 0 0;
	text-shadow: none;
	font-size: 55%;
	border: 1px solid white;
}

.article .article-header  .notify.notify-new 
{
  background-color: red;
}
.article .article-header  .notify.notify-look
{
  background-color: red;
}
.article .article-header  .notify.notify-topics
{
  background-color: green;
}

.article h2
{
	font-size: 120% !important;
}
.article h2 > span
{
	padding-right: 86px;
}

.article .article-image
{
	float: right;
	width: 200px;
}
.article .article-image img
{
	display: block;
	border-radius: 7px;
	width: 100%;
	border: none;
}

.article .article-body.has-image
{
	margin-right: 220px;
}

.article.protected
{
	opacity: .25;
}

p.commands
{
	text-align: center;
}

a.submit-show-all
{
	display: inline-block;
	padding: 1em 2em;
	background-color: rgb(10, 116, 185);
	color: white;
	text-decoration: none;
	
}
a.submit-show-all:hover
{
	background-color: rgba(10, 116, 185,.5);
}

/*
ページネーション
*******************/
ul.pagenation
{
  margin: 2em 0;
  text-align: center;
	padding: 0;
}
ul.pagenation > li
{
	border: 1px solid #d8d8d8;
	display:inline-block;
	margin: 0 .25em .5em .25em;
	background-color: white;
}
ul.pagenation > li:hover
{
	background-color: #eee;
}
ul.pagenation > li.current
{
	background-color: black;
	color: white;
}

ul.pagenation > li > a,
ul.pagenation > li > span
{
	display: block;
	padding: .5em 1em;
}
ul.pagenation > li > a
{
	text-decoration: none;
	color: inherit;
}

/*
ページ送り
***************/
ul.paging
{
	text-align: center;
	margin: 2em 0;
	padding: 0;
}
ul.paging > li
{
	display: inline-block;
	margin: 0 .25em;
	background-color: #f1f1f1;
}

ul.paging > li > a
{
	display: block;
	padding: 1.5em 2.5em;
	color: inherit;
	font-size: 120%;
	text-decoration: none;
}
ul.paging > li.next > a
{
	background-color: rgb(0,200,255);
	color: white;
}
ul.paging > li.next > a::after
{
	font-family: FontAwesome;
	margin-left: .5em;
	content: '\f054';
}
ul.paging > li.next > a:hover
{
	background-color: rgba(0,200,255,.75);
	color: white;
}

ul.paging > li.prev > a
{
	background-color: rgb(0,150,255);
	color: white;
}
ul.paging > li.prev > a::before
{
	font-family: FontAwesome;
	margin-right: .5em;
	content: '\f053';
}
ul.paging > li.prev > a:hover
{
	background-color: rgba(0,150,255,.75);
	color: white;
}

/*
添付ファイル
*****************/
ul.article-attaches
{
	margin: 1em 0;
}
ul.article-attaches:before
{
	content: '添付ファイル';
	display: block;
	padding-bottom: .5em;
	border-bottom: 1px dotted #aaa;
	font-weight: bold;
	color: #0e73b9;
}
ul.article-attaches > li
{
	display: inline-block;
	margin: 1em .5em;
}
ul.article-attaches > li > a
{
	display: block;
	font-size: 90%;
	font-weight: bold;
}
ul.article-attaches > li > a:hover
{
	color: #0e73b9;
}
ul.article-attaches > li > a::before
{
	font-family: FontAwesome;
	font-weight: bold;
	margin-right: .5em;
	content: '\f019';
	color: #0e73b9;
}





/*------------------------------------------------------------------------------

 幅狭の場合のスタイル・オーバーライド

------------------------------------------------------------------------------*/
@media screen and (max-width: 600px) {
	body
	{
		margin: 0;
		padding: 0;
	}
	.main
	{
		padding: 0 1em;
	}
	.article .article-image
	{
		float: none;
		width: 100%;
	}
	.article .article-body.has-image
	{
		margin-right: 0;
	}
	.article .article-header
	{
		padding-right: 0;
	}
	.article .article-header > span:not(.notify)
	{
		display: block !important;
	}
	.article .article-header > .date
	{
	  position: static;
	}

	ul.paging
	{
		margin-left: -1em;
		margin-right: -1em;
	}
	ul.paging:after
	{
		display: block;
		clear: left;
		content: ' ';
	  height: 0;
	}
	ul.paging > li
	{
		float: left;
	  width: calc(50% - 1px);
		margin: 0;
	}
	ul.paging > li.next
	{
		border-left: 1px solid white;
	}
	ul.paging > li.prev
	{
		border-right: 1px solid #d8d8d8;
	}
	ul.paging > li > a
	{
		font-size: 90%;
		padding: 1.5em 2.5em;
	}
}