@import url( "./styleCommon.css" );

	
	/* Article */
	#PanelArticleArticle
	{
		transition			:	all 0.2s ease-out;
		-webkit-transition		:	all 0.2s ease-out;
		-moz-transition		:	all 0.2s ease-out;
		-o-transition			:	all 0.2s ease-out;
	}
	div.PanelArticleBody
	{
	}
	div.PanelArticleHeader
	{
//		border-top			:	solid 1px rgba(0,0,0,0.25);
		border-bottom		:	solid 1px rgba(0,0,0,0.25);
	}
	div.PanelArticleIcon
	{
		display			:	none;
	}
	div.PanelArticleTitle
	{
	}
	div.PanelArticleTitle h2
	{
		margin			:	0px;
		padding			:	0px;
	}
	div.PanelArticleTime
	{
		margin			:	0px;
		padding			:	0px;
		text-align			:	right;
		white-space			:	nowrap;
	}
	div.PanelArticleComment
	{
		margin			:	0px;
		padding			:	0px;
	}
	div.PanelArticleComment img
	{
		height				:	auto !important;
	}
	div.PanelArticleComment iframe
	{
		width				:	100% !important;
	}
	
	/* Archive */
	#PanelArticleArchive
	{
		transition			:	all 0.2s ease-out;
		-webkit-transition		:	all 0.2s ease-out;
		-moz-transition		:	all 0.2s ease-out;
		-o-transition			:	all 0.2s ease-out;
	}
	div.PanelArticleArchiveBox
	{
		transition			:	all 0.2s ease-out;
		-webkit-transition		:	all 0.2s ease-out;
		-moz-transition		:	all 0.2s ease-out;
		-o-transition			:	all 0.2s ease-out;
	}
	div.PanelArticleArchiveBox h2
	{
		margin			:	0em;
		color				:	inherit;
//		border-top			:	solid 1px rgba(0,0,0,0.25);
		border-bottom		:	solid 1px rgba(0,0,0,0.25);
		transition			:	all 0.2s ease-out;
		-webkit-transition		:	all 0.2s ease-out;
		-moz-transition		:	all 0.2s ease-out;
		-o-transition			:	all 0.2s ease-out;
	}
	#PanelArticleArchiveByDate
	{
	}
	#PanelArticleArchiveByMonth
	{
	}
	#PanelArticleArchiveByCategory
	{
	
	}
	
	/* Button */
	div.PanelArticlePageButton
	{
		border-top			:	solid 1px rgba(0,0,0,0.25);
		border-bottom		:	solid 1px rgba(0,0,0,0.25);
	}
	div.LabelArticlePageButton, div.LabelArticlePageButtonSelected
	{
		display			:	inline-block;
		line-height			:	1em;
	}
	div.LabelArticlePageButton
	{
		border			:	solid 1px #999999;
		background-color		:	#ffffff;
		transition			:	all 0.2s ease-out;
		-webkit-transition		:	all 0.2s ease-out;
		-moz-transition		:	all 0.2s ease-out;
		-o-transition			:	all 0.2s ease-out;
	}
	div.LabelArticlePageButtonSelected
	{
		color				:	#ffffff;
		background-color		:	rgb(192,38,76);
		font-weight			:	bold;
		border			:	solid 1px rgb(192,38,76);
	}
	div.LabelArticlePageButton:hover
	{
		background-color		:	rgb(192,38,76);
		border			:	solid 1px rgb(192,38,76);
	}
	div.LabelArticlePageButton:hover a
	{
		color				:	#ffffff;
		text-decoration		:	none;
	}


/*
======================================
Pc
======================================
*/
@media print, screen and (min-width:801px)
{
	/* Panel */
	#PanelArticle
	{
		display			:	table;
		text-align			:	left;
		width				:	100%;
	}
	#PanelArticleArticle
	{
		display			:	table-cell;
		text-align			:	left;
		vertical-align			:	top;
	}
	#PanelArticleArchive
	{
		display			:	table-cell;
		text-align			:	left;
		vertical-align			:	top;
	}

	/* Article */
	div.PanelArticleBody
	{
		margin			:	0px 0px 50px 0px;
	}
	div.PanelArticleHeader
	{
		display			:	table;
		width				:	100%;
		margin			:	0px 0px 20px 0px;
//		padding			:	8px 0px;
		padding			:	0px 0px 8px 0px;
	}
	div.PanelArticleTitle
	{
		display			:	table-cell;
		text-align			:	left;
		vertical-align			:	middle;
	}
	div.PanelArticleTime
	{
		display			:	table-cell;
		padding			:	0px 0px 0px 30px;
		text-align			:	right;
		vertical-align			:	bottom;
	}

	/* Archive */
	div.PanelArticleArchiveBox
	{
		margin			:	0px;
		padding			:	0px;
	}
	div.PanelArticleArchiveBox h2
	{
		margin			:	0px;
//		padding			:	8px 0px;
		padding			:	0px 0px 8px 0px;
	}

	/* Button */
	div.PanelArticlePageButton
	{
		margin			:	0px 0px 50px 0px;
		padding			:	10px 0px;
	}
	div.LabelArticlePageButton, div.LabelArticlePageButtonSelected
	{
		display			:	inline-block;
		padding			:	10px 10px;
		margin			:	4px 4px 4px 0px;
	}
	div.LabelArticlePageButton a
	{
		padding			:	10px 10px;
	}
	div.LabelArticlePageButtonSelected
	{
		padding			:	10px 15px;
	}

	/* YouTube */
	iframe.PanelVideo
	{
		width				:	100% !important;
	}


}


/*
======================================
Wide PC
======================================
*/
@media print, screen and (min-width:1241px)
{
	/* Panel */
	div.PanelArticleTitle h2
	{
		font-size			:	16px;
	}
	#PanelArticleArchive
	{
		width				:	300px;
		padding			:	0px 0px 0px 50px;
	}
	div.PanelArticleArchiveBox
	{
		margin			:	0px 0px 20px 0px;
	}
	div.PanelArticleArchiveBox h2
	{
		margin			:	0px 0px 20px 0px;
		font-size			:	16px;
	}

	/* YouTube */
	div.PanelArticleComment iframe
	{
		height				:	480px !important;
	}


}

/*
======================================
Narrow PC
======================================
*/
@media (min-width:1001px) and (max-width:1240px)
{
	/* Panel */
	div.PanelArticleTitle h2
	{
		font-size			:	16px;
	}
	#PanelArticleArchive
	{
		width				:	250px;
		padding			:	0px 0px 0px 50px;
	}
	div.PanelArticleArchiveBox
	{
		margin			:	0px 0px 20px 0px;
	}
	div.PanelArticleArchiveBox h2
	{
		margin			:	0px 0px 20px 0px;
		font-size			:	16px;
	}

	/* YouTube */
	div.PanelArticleComment iframe
	{
		height				:	382px !important;
	}

}

/*
======================================
Tablet
======================================
*/
@media print, screen and (min-width:801px) and (max-width:1000px)
{
	/* Panel */
	div.PanelArticleTitle h2
	{
		font-size			:	14px;
	}
	#PanelArticleArchive
	{
		width				:	200px;
		padding			:	0px 0px 0px 30px;
	}
	div.PanelArticleArchiveBox
	{
		margin			:	0px 0px 15px 0px;
	}
	div.PanelArticleArchiveBox h2
	{
		margin			:	0px 0px 15px 0px;
		font-size			:	14px;
	}

	/* YouTube */
	div.PanelArticleComment iframe
	{
		height				:	320px !important;
	}


}



/*
======================================
Smart Phone
======================================
*/
@media screen and (max-width:800px)
{
	/* Panel */
	#PanelArticle
	{
		text-align			:	left;
	}
	#PanelArticleArticle
	{
		margin			:	0px 0px 30px 0px;
	}
	#PanelArticleArchive
	{
	}

	/* Article */
	div.PanelArticleBody
	{
		margin			:	0px 0px 30px 0px;
	}
	div.PanelArticleHeader
	{
		margin			:	0px 0px 15px 0px;
//		padding			:	8px 0px;
		padding			:	0px 0px 8px 0px;
	}

	/* Archive */
	div.PanelArticleArchiveBox
	{
		margin			:	0px 0px 30px 0px;
	}
	div.PanelArticleArchiveBox h2
	{
//		padding			:	8px 0px;
		padding			:	0px 0px 8px 0px;
	}

	/* Button */
	div.PanelArticlePageButton
	{
		margin			:	0px 0px 30px 0px;
		padding			:	10px 0px;
	}
	div.LabelArticlePageButton, div.LabelArticlePageButtonSelected
	{
		display			:	inline-block;
		padding			:	10px 10px;
		margin			:	4px 4px 4px 0px;
	}
	div.LabelArticlePageButton a
	{
		padding			:	10px 10px;
	}
	div.LabelArticlePageButtonSelected
	{
		padding			:	10px 15px;
	}

	/* YouTube */
	div.PanelArticleComment iframe
	{
		height				:	210px !important;
	}

}