/* Body */
#PanelBody
{
}

/* Menu */
#PanelProductMenu
{
	display					:	table;
	width					:	100%;
	margin					:	0px 0px 30px 0px;
	font-size				:	21px;
	font-weight				:	bold;
}
#PanelProductMenuTitle
{
	display					:	table-cell;
	width					:	200px;
	padding					:	0px;
	text-align				:	center;
	vertical-align				:	middle;
	color					:	rgb(0,46,110);
	background-color			:	rgb(212,227,245);
}
#PanelProductMenuBody
{
	display					:	table-cell;
	padding					:	0px 0px 0px 0px;
	text-align				:	center;
	vertical-align				:	middle;
	color					:	rgb(0,46,110);
}
#PanelProductMenuBody ul
{
	margin					:	0px;
	padding					:	0px;
	text-align				:	right;
}
#PanelProductMenuBody ul li
{
	display					:	inline-block;
	width					:	186px;
	margin					:	0px 0px 0px 6px;
	padding					:	20px 0px;
	border					:	solid 1px rgb(0,46,110);
	text-align				:	center;
	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;
}
#PanelProductMenuBody li.ListProductMenuDefault:hover,
#PanelProductMenuBody li.ListProductMenuActive
{
	background-color			:	rgb(212,227,245);
	transition				:	none;
	-webkit-transition			:	none;
	-moz-transition				:	none;
	-o-transition				:	none;
}


/* Column */
div.PanelLayout
{
	display					:	table;
	width					:	100%;
}
div.PanelLayoutPhoto
{
	display					:	table-cell;
	width					:	460px;
	vertical-align				:	top;
	padding					:	0px 0px 0px 30px;
}
div.PanelLayoutPhoto img
{
	width					:	100%;
}
div.PanelLayoutComment
{
	display					:	table-cell;
	vertical-align				:	top;
}

/* List Text */
ul.ListText
{
	margin					:	0px;
	padding					:	0px;
}
ul.ListText li
{
	position					:	relative;
	list-style-type				:	none;
	width					:	auto;
	margin					:	0px 0px 0px 1.25em;;
	padding					:	0px 0px 0px 0px;
}
ul.ListText li:before
{
	position					:	absolute;
	top					:	0px;
	left					:	-1.25em;
	content					:	"●";
	color					:	rgb(0,46,110);
}
/* List Photo Small */
ul.ListPhotoSmall
{
	margin					:	0px;
	padding					:	0px;
}
ul.ListPhotoSmall li
{
	display					:	inline-block;
	width					:	460px;
	margin					:	0px 0px 15px 0px;
	padding					:	0px 25px 0px 0px;
}
ul.ListPhotoSmall li div.PanelListPhotoSmall
{
	display					:	table;
	margin					:	0px;
	padding					:	0px;
}
ul.ListPhotoSmall li div.PanelListPhotoSmall div
{
	display					:	table-cell;
	vertical-align				:	middle;
}
div.PanelListPhotoSmallBullet
{
	width					:	40px;
	text-align				:	center;
}
div.PanelListPhotoSmallBullet img
{
	width					:	100%;
}
div.PanelListPhotoSmallComment
{
}
div.PanelListPhotoSmallComment b
{
	color					:	rgb(0,46,110);
}
div.PanelListPhotoSmallPhoto
{
	width					:	120px;
	padding					:	0px 15px;
}
div.PanelListPhotoSmallPhoto img
{
	width					:	100%;
	vertical-align				:	middle;
	border					:	solid 1px rgb(0,0,0);
}
/* List Photo Large */
ul.ListPhotoLarge
{
	margin					:	0px;
	padding					:	0px;
}
ul.ListPhotoLarge li
{
	display					:	inline-block;
	width					:	300px;
	margin					:	0px 35px 0px 0px;
	padding					:	0px;
	text-align				:	center;
}
ul.ListPhotoLarge li:nth-child(3n)
{
	margin-right				:	0px;
}
ul.ListPhotoLarge li img
{
	width					:	100%;
	margin					:	0px 0px 10px 0px;
}


/*
======================================
PC
======================================
*/
@media (min-width: 401px)
{
	/* Panel */
	h1.PanelTitle
	{
		background-image			:	url( './image/Panel/BackgroundPc.jpg' );
		text-align				:	right;
	}
	h1.PanelTitle img
	{
		height					:	48px;
		margin					:	0px 80px 0px auto;
	}
}

/*
======================================
Smart Phone
======================================
*/
@media (max-width: 400px)
{
	/* Panel */
	h1.PanelTitle
	{
		padding					:	30px 0px;
		background-image			:	url( './image/Panel/BackgroundSmart.jpg' );
		background-size			:	cover;
		background-position			:	center 0px;
	}
	h1.PanelTitle img
	{
		height					:	36px;
		margin					:	0px auto;
		padding					:	30px 0px;
	}
	
	/* Body */
	#PanelBody
	{
		display					:	block;
		width					:	100%;
	}
	
	/* Menu */
	#PanelProductMenu
	{
		display					:	block;
		width					:	100%;
		margin					:	0px 0px 30px 0px;
		padding					:	0px;
		font-weight				:	bold;
	}
	#PanelProductMenuTitle
	{
		display					:	block;
		width					:	100%;
		margin					:	0px 0px 6px 0px;
		padding					:	10px 0px;
		font-size				:	16px;
	}
	#PanelProductMenuBody
	{
		display					:	block;
		padding					:	0px;
		font-size				:	14px;
	}
	#PanelProductMenuBody ul
	{
		margin					:	0px;
		padding					:	0px;
	}
	#PanelProductMenuBody ul li
	{
		display					:	inline-block;
		width					:	160px !important;
		margin					:	0px 0px 6px 0px;
		padding					:	10px 0px;
		border					:	solid 1px rgb(0,46,110);
	}
	#PanelProductMenu li:nth-child(2n-1)
	{
		margin-right				:	6px;
	}
	#PanelProductMenu li:last-child
	{
		width					:	305px;
	}
	#PanelProductMenu li:before
	{
		top					:	16px;
		width					:	6px;
		height					:	6px;
		margin					:	0px 5px 0px 0px;
	}


	/* Content */
	#PanelBodyContent
	{
		display					:	block;
		width					:	100%;
		padding					:	0px;
	}
	#PanelBodyContent h2
	{
		padding					:	0px 10px;
		font-size				:	24px;
		line-height				:	2em;
	}
	#PanelBodyContent h3
	{
		font-size				:	18px;
		line-height				:	1.8em;
	}
	#PanelBodyContent h4
	{
		margin					:	0px 0px 10px 0px;
		font-size				:	16px;
		line-height				:	1.8em;
	}


	/* Content */
	div.PanelLayoutPhoto
	{
		display					:	block;
		width					:	100%;
		padding					:	0px;
		text-align				:	center;
	}
	div.PanelLayoutPhoto img
	{
		width					:	100%;
	}
	div.PanelLayoutComment
	{
		display					:	block;
		width					:	100%;
		margin					:	0px 0px 15px 0px;
		padding					:	0px;
	}


	/* List Photo Small */
	ul.ListPhotoSmall
	{
		margin					:	0px;
		padding					:	0px;
	}
	ul.ListPhotoSmall li
	{
		display					:	block;
		width					:	100%;
		margin					:	0px 0px 10px 0px;
		padding					:	0px;
	}
	div.PanelListPhotoSmallBullet
	{
		width					:	20px;
		text-align				:	center;
	}
	div.PanelListPhotoSmallComment
	{
		line-height				:	1.6em;
	}
	div.PanelListPhotoSmallPhoto
	{
		width					:	70px;
		padding					:	0px 10px;
	}
	/* List Photo Large */
	ul.ListPhotoLarge
	{
		margin					:	0px;
		padding					:	0px;
	}
	ul.ListPhotoLarge li
	{
		display					:	block;
		width					:	100%;
		margin					:	0px 0px 15px 0px;
		padding					:	0px;
		text-align				:	center;
	}
	ul.ListPhotoLarge li img
	{
		width					:	80%;
		margin					:	0px 0px 5px 0px;
	}

}