@charset "utf-8";

	/* Introduction */
	#PanelIntroduction
	{
	}
	#PanelIntroductionComment
	{
		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;
	}
	#PanelIntroductionComment h2 img
	{
		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;
	}
	#PanelIntroductionPhoto
	{
		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;
	}
	#PanelIntroductionPhoto img
	{
		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;
	}

/*
======================================
PC
======================================
*/
@media (min-width: 801px)
{
	/* Introduction */
	#PanelIntroduction
	{
		display			:	table;
		width				:	100%;
		height				:	auto;
	}
	#PanelIntroductionComment
	{
		display			:	table-cell;
		text-align			:	left;
		vertical-align			:	middle;
	}
	#PanelIntroductionComment h2 img
	{
		height				:	25px;
	}
	#PanelIntroductionPhoto
	{
		display			:	table-cell;
		text-align			:	right;
		vertical-align			:	middle;
	}
	#PanelIntroductionPhoto img
	{
		width				:	100%;
		height				:	auto;
	}
}

/*
======================================
Wide PC
======================================
*/
@media (min-width: 1241px)
{
	#PanelIntroductionPhoto
	{
		width				:	350px;
	}
}

/*
======================================
Narrow PC
======================================
*/
@media (min-width: 1001px) and (max-width: 1240px)
{
	#PanelIntroductionPhoto
	{
		width				:	300px;
	}
}

/*
======================================
Tablet
======================================
*/
@media (min-width: 801px) and (max-width: 1000px)
{
	#PanelIntroductionPhoto
	{
		width				:	250px;
	}
}



/*
======================================
Smart Phone
======================================
*/
@media (max-width: 800px)
{
	/* Introduction */
	#PanelIntroduction
	{
		display			:	block;
		width				:	100%;
	}
	#PanelIntroductionComment
	{
		display			:	block;
		width				:	100%;
	}
	#PanelIntroductionComment h2
	{
		text-align			:	center;
	}
	#PanelIntroductionComment h2 img
	{
		height				:	25px;
	}
	#PanelIntroductionPhoto
	{
		display			:	block;
		width				:	100%;
		text-align			:	center;
	}
	#PanelIntroductionPhoto img
	{
		width				:	80%;
	}
}