/* Panel */
h1.PanelTitle
{
	background-image		:	url('./image/Panel/Background.png');
	background-size		:	conver;
	background-position		:	center center;
	background-repeat		:	no-repeat;
	text-align			:	center;
}
h1.PanelTitle img
{
	height				:	40px;
}

/* Layout */
#PanelArticle
{
	display				:	table;
	width				:	980px;
	margin				:	0px auto;
}
#PanelArticleArticle
{
	display				:	table-cell;
	width				:	700px;
	padding				:	0px 40px 0px 0px;
	vertical-align			:	top;
}
#PanelArticleArchive
{
	display				:	table-cell;
	width				:	240px;
	padding				:	0px;
	vertical-align			:	top;
}

/* Article */
div.PanelArticle
{
	margin				:	0em 0em 2em 0em;
	padding				:	0em 0em 1em 0em;
}
div.PanelArticleHeader
{
	display				:	table;
	width				:	100%;
	background-color		:	#eeeeee;
	margin				:	0px 0px 30px 0px;
}
div.PanelArticleTitle
{
	display				:	table-cell;
	vertical-align			:	middle;
	padding				:	8px 20px;
}
div.PanelArticleTitle h2
{
	font-size			:	16px;
	line-height			:	1.8em;
	margin				:	0px;
}
div.PanelArticleTime
{
	display				:	table-cell;
	vertical-align			:	middle;
	text-align			:	right;
	padding				:	8px 20px;
}
div.PanelArticleComment
{
	margin				:	1em 0em;
}
div.PanelArticleComment img
{
	max-width			:	100%;
	height				:	auto;
}


/* Archive */
div.PanelArticleArchiveBox
{
	margin					:	0px 0px 30px 0px;
}
div.PanelArticleArchiveBox h2
{
	background-color			:	rgb(212,227,245);
	padding					:	8px 20px;
	font-size				:	16px;
	line-height				:	18px;
}
#PanelArticleArchiveByDate
{
}
#PanelArticleArchiveByMonth
{
}
#PanelArticleArchiveByCategory
{

}
#PanelArticleArchiveByCategory li.ListArticleCategoryLarge
{
}
#PanelArticleArchiveByCategory li.ListArticleCategoryMiddle
{

}
#PanelArticleArchiveByCategory li.ListArticleCategorySmall
{

}
div.PanelArticleArchiveBox a.LinkSelected
{
	color				:	#cc0000;
	text-decoration			:	none;
}

/* Button */
div.PanelArticlePageButton
{
	background-color	:	#eeeeee;
	padding			:	10px 20px;
	margin			:	0px 0px 30px 0px;
}
div.LabelArticlePageButton, div.LabelArticlePageButtonSelected
{
	display			:	inline-block;
	padding			:	10px 15px;
	margin			:	0px 5px 0px 0px;
	border-radius		:	3px;
	font-size		:	18px;
	line-height		:	1em;
}
div.LabelArticlePageButton
{
	border			:	solid 1px #999999;
	background-color	:	rgb(255,255,255);
	color			:	#0066cc;
}
div.LabelArticlePageButtonSelected
{
	color			:	rgb(255,255,255);
	background-color	:	#0066cc;
	border			:	solid 1px #0066cc;
}
a:hover div.LabelArticlePageButton
{
	color			:	rgb(255,255,255);
	background-color	:	#0066cc;
	border			:	solid 1px #0066cc;
}
div.PanelArticleButtonTop
{
	margin-top		:	2em;
	text-align		:	right;
}


/*
======================================
Smart Phone
======================================
*/
@media (max-width: 400px)
{
	#PanelArticle,
	#PanelArticleArticle,
	#PanelArticleArchive
	{
		display				:	block;
		width				:	100%;
		margin				:	0px 0px 15px 0px;
		padding				:	0px;
	}
	div.PanelArticleHeader
	{
		display				:	block;
		width				:	inherit;
		margin				:	0px 0px 15px 0px;
		padding				:	8px 20px;
	}
	div.PanelArticleTitle,
	div.PanelArticleTime
	{
		display				:	block;
		padding				:	2px 0px;
		text-align			:	left;
	}
	div.PanelArticleBody img
	{
		max-width			:	100% !important;
		width				:	auto;
		height				:	auto !important;
	}
	div.PanelArticleComment
	{
		padding				:	0px 15px;
	}

	div.PanelArticleArchiveBox
	{
		display				:	block;
		width				:	auto;
		margin				:	0px 0px 30px 0px;
		padding				:	0px 15px;
	}
	#PanelArticleArchiveByMonth li
	{
		display				:	inline-block;
		width				:	100px;
		margin				:	0px 0px 10px 0px;
		padding				:	0px;
	}
	#PanelArticleArchiveByMonth li:before
	{
		content				:	"・";
	}
}