@charset "UTF-8";
/*
* Theme Name: WorldiCity
* Last Update: Aug 15 2014
* Version: 1.0
* Code Maked By Kiyo
*/



/*
----------------------------
 header
----------------------------
*/

#headerOuter {
	width: 100%;
/*	min-height: 120px;
*/	min-height: 83px;
	height: auto !important;
/*	height: 120px;
*/	height: 83px;
	border-top: 3px solid #061e32;
	}

		#headerInner {
			width: 980px;
		/*	min-height: 120px;
		*/	min-height: 83px;
			height: auto !important;
		/*	height: 120px;
		*/	height: 83px;
			margin: 0 auto;
			position: relative;
			text-align: left;
		}

	@media screen and (max-width:768px){
		#headerOuter {
			min-height: 100px;
			height: auto !important;
		/*	height: 120px;
		*/	height: 83px;
		}
		#headerInner {
			width: 100%;
			min-height: 100px;
			height: auto !important;
		/*	height: 120px;
		*/	height: 83px;
			margin: 0 auto;
			text-align: center;
			background: #fff;
		}
	}


/*
----------------------------
 logo
----------------------------
*/

	#headerLogo{
		display: block;
		width: 196px;
/*		height: 64px;
*/		height: 50px;
		position: absolute;
/*		top:25px;
*/		top:10px;
		left: 0;
	}

	@media screen and (max-width:768px){
		#headerLogo{
			display: block;
			width: 196px;
	/*		height: 64px;
	*/		height: 50px;
			position: inherit;
			margin: 0 auto 0;
	/*		top:25px;
	*/		top:10px;
		}
	}


/*
----------------------------
#headerNavi
----------------------------
*/

#headerNavi{
	position: absolute;
	right: 0;
/*	top:40px;
*/	top:5px;
	}

	#headerNavi li#hn01,
	#headerNavi li#hn02,
	#headerNavi li#hn03{
		width: auto;
		font-size: 11px;
		font-size: 1.1em;
		float: left;
		margin-left: 10px;
	}
		#headerNavi li#hn01 a,
		#headerNavi li#hn02 a,
		#headerNavi li#hn03 a{
		}
		@media screen and (max-width:768px){
			#headerNavi{
				display: none;
			}
		}

/*
----------------------------
txtsSizeChanger 
----------------------------
*/

dl.txtsSizeChanger {
	position: absolute;
	width: 240px;
	height: 25px;
/*	top: 70px;
*/	top: 35px;
	right: 0;
	background-image:url(../_images/header/head_bg_switcher.gif);
	background-repeat:no-repeat;
	background-position:left top;
}

	@media screen and (max-width:768px){
		dl.txtsSizeChanger{
			display: none;
		}
	}

	dl.txtsSizeChanger dt {
		display: block;
		position: absolute;
		top: 7px;
		left: 9px;
	}
		dl.txtsSizeChanger dt span{
			display: block;
			color: #999;
			font-size: 9px;
			letter-spacing: 0.1em;
/*			margin-top: -4px;
*/			margin-top: -2px;
		}

	dl.txtsSizeChanger dd {
		display: block;
		position: absolute;
		bottom: 3px;
		background-repeat: no-repeat;
		background-position: 0 0;
	}
		dl.txtsSizeChanger dd a {
			display: block;
			background-position: 0 0;
			background-repeat: no-repeat;
			text-indent: 100%;
			white-space: nowrap;
			overflow: hidden;
		}
		dl.txtsSizeChanger dd.sBtn,
		dl.txtsSizeChanger dd.mBtn,
		dl.txtsSizeChanger dd.lBtn,
		dl.txtsSizeChanger dd.sBtn a,
		dl.txtsSizeChanger dd.mBtn a,
		dl.txtsSizeChanger dd.lBtn a{
			width: 28px;
			height: 18px;
		}
		dl.txtsSizeChanger dd.sBtn {right: 5px; }
		dl.txtsSizeChanger dd.mBtn {right: 36px;}
		dl.txtsSizeChanger dd.lBtn {right: 67px;}

			dl.txtsSizeChanger dd.sBtn a {background-image: url(../_images/header/head_btn_txtchg_s_off.jpg);}
			dl.txtsSizeChanger dd.mBtn a {background-image: url(../_images/header/head_btn_txtchg_m_off.jpg);}
			dl.txtsSizeChanger dd.lBtn a {background-image: url(../_images/header/head_btn_txtchg_l_off.jpg);}

			dl.txtsSizeChanger dd.sBtn a.textresizer-active{background-image: url(../_images/header/head_btn_txtchg_s_on.jpg);}
			dl.txtsSizeChanger dd.mBtn a.textresizer-active{background-image: url(../_images/header/head_btn_txtchg_m_on.jpg);}
			dl.txtsSizeChanger dd.lBtn a.textresizer-active{background-image: url(../_images/header/head_btn_txtchg_l_on.jpg);}


/*
----------------------------
#hn03toggle
----------------------------
*/

	#hntoggle{
		position: fixed;
		position: absolute;
/*		top:40px;
*/		top:20px;
		left: 20px;
	}
	#hntoggle a{
			color: #061e32;
		}
		#hntoggle a:hover{
				background: none;
			}
			#hntoggle a:after{
				content: "\f0c9";
				font-family: FontAwesome;
				font-weight: normal;
				font-style: normal;
				font-size: 200%;
			}



	@media screen and (min-width:769px){
		#hntoggle{
			display: none;
		}
	}

	@media screen and (max-width:768px){
		#hntoggle{
/*			top:10px;
*/			top:5px;
		}
	}

		.blur {
			-webkit-animation-name: blurAnim;
			-webkit-animation-duration: 1s;
			-webkit-animation-fill-mode: forwards;
		}
		@-webkit-keyframes blurAnim {
			from {
			-webkit-filter: blur(0px);
			}
			to {
			-webkit-filter: blur(5px);
			}
		}
		.nomal {
			-webkit-animation-name: nomalAnim;
			-webkit-animation-duration: 1s;
			-webkit-animation-fill-mode: forwards;
		}
		@-webkit-keyframes nomalAnim {
			from {
			-webkit-filter: blur(5px);
			}
			to {
			-webkit-filter: blur(0px);
			}
		}