@charset "utf-8";

/* ==========================================

  “TOP” CSS
		
========================================== */


html	{	background:#fff;}
body	{	background:#fff;}


/* header
========================================== */
#spH1							{	position:relative; z-index:10;}

@media print, screen and (min-width:600px) {
header							{	background-color:rgba(245,245,245,0);}
header.bgTrans, header.bgGray	{	-webkit-transition:all .4s; -o-transition:all .4s; transition:all .4s}
header.bgGray					{	background-color:rgba(245,245,245,1);}
header.bgTrans 					{	background-color:rgba(245,245,245,0);}
}


/* Main Content
========================================== */
@media print, screen and (min-width:600px) {
main 			{	max-width:100%;}
}


#mainVisual,
#prologue	{	animation: fadeIn 2s ease 0s 1 normal;
    			-webkit-animation: fadeIn 2s ease 0s 1 normal;}

	@keyframes fadeIn {
		0% {opacity: 0}
		100% {opacity: 1}
	}
	
	@-webkit-keyframes fadeIn {
		0% {opacity: 0}
		100% {opacity: 1}
	}

#mainVisual	{	background:#f4f4f4; margin-top:-10px; }
#mainVisual img	{	margin:0 auto; display:block; max-width:1100px;}

@media print, screen and (min-width:600px) {
	#mainVisual	{	margin-top:-170px;}
}

@media print, screen and (min-width:920px) {
	#mainVisual	{	margin-top:-184px;}
}


	/* Lead
	---------------------------------------- */
	#prologue			{	padding:20px 10px; text-align:center;}
	#prologue h2		{	font-weight:bold;}
	#prologue p			{	line-height:1.5; margin-top:1em;}
	#prologue p strong	{	display:inline-block; margin-bottom:0.5em;}
	#prologue p span	{	display:inline-block;}

	@media print, screen and (min-width:600px) {
	#prologue			{	padding:35px 10px;}
	}

	/* Menu
	---------------------------------------- */
	#menu				{	width:100%; max-width:1100px; margin:0 auto;}
	#menu > li			{	margin-bottom:30px;}
	#menu > li ul		{	padding:15px 20px;}
	#menu > li h3		{	font-weight:bold; border-left:5px solid; padding-left:5px; margin-bottom:0.4em; line-height:1.3; }
	#menu > li a		{	display:block; padding:10px 5px; text-align:center; border:1px solid; background:#fff;}
	#menu > li a:hover	{	background-color:#f9f9f9;}
	#menu > li p		{	margin-top:15px; line-height:1.5;}
	#menu > li li:first-child	{	margin-bottom:15px;}
	
		#menu > li.colBu		{	background-color:#d3e4f3;}
		#menu > li.colPk		{	background-color:#fcdce6;}
		
		#menu > li.colBu h3		{	border-left-color:#2177c1;}
		#menu > li.colPk h3		{	border-left-color:#f05182;}
		
		#menu > li.colBu a		{	border-color:#2177c1;}
		#menu > li.colPk a		{	border-color:#f05182;}
		
		#menu > li.colBu a:link	{	color:#2177c1;}
		#menu > li.colPk a:link	{	color:#f05182;}
	
		#menu > li.colBu a:visited	{	color:#2177c1;}
		#menu > li.colPk a:visited	{	color:#f05182;}
	
	@media print, screen and (min-width:600px) {
	
	#menu > li			{	display:table; width:100%;
							background-position:left center; background-repeat:no-repeat;
							background-size:58% auto; -webkit-background-size:58% auto; -moz-background-size:58% auto;}
	#menu > li span		{	display:none;}
	#menu > li ul		{	width:100%; display:table-cell; padding:2% 20px 2% 60%; vertical-align:middle; }
	#menu > li a		{	text-decoration:none;}
		#menu > li.colPk		{	background-image:url(../_img/top/01.jpg);}
		#menu > li.colBu		{	background-image:url(../_img/top/02.jpg); background-position:right top;}
		#menu > li.colBu ul		{	padding:2% 60% 2% 20px;}
	}

	@media print, screen and (min-width:920px) {
	#menu > li ul		{	padding:5% 20px 5% 60%; }
		#menu > li.colBu ul		{	 padding:5% 60% 5% 20px;}
	}


	/* box gray
	---------------------------------------- */
	.boxGray	{	background:#f4f4f4; padding:30px 0 0 0;}

	/* Bnr
	---------------------------------------- */
	#bnr li			{	text-align:center; margin-bottom:20px;}
	#bnr li a img	{	width:30%;}
	#bnr li p		{	color:#999; margin-top:0.5em;}
	#bnr li p em	{	color:#000; font-weight:bold; display:inline-block; padding-left:1em;}

	@media print, screen and (min-width:600px) {
	#bnr			{	margin:0 auto; display:table;}
	#bnr li			{	display:table-cell; padding:0 20px; }
	#bnr li a		{	display:block; text-align:center;}
	#bnr li a img	{	height:46px; width:auto; }
	#bnr li p		{	text-align:left; line-height:1.2; text-align:center;}
	#bnr li p em	{	padding-left:0; display:block;}
	}

	@media print, screen and (min-width:920px) {
	#bnr li a		{	width:100px; float:left;}
	#bnr li a img	{	height:46px; width:auto;}
	#bnr li p		{	display:table-cell; text-align:left; padding:3px 0 3px 10px; line-height:20px;}
	}


	/* note
	---------------------------------------- */
	#topPageNote	{	padding:20px 15px 20px; color:#999; line-height:1.4; margin:0 auto; width:100%; max-width:1100px;}


	@media print, screen and (min-width:600px) {
	#topPageNote	{	padding:40px 15px 0;}
	}

	/* footNav
	---------------------------------------- */
	#footNav	{	background:#f4f4f4;}