@charset "utf-8";
/**
 * header.css
 */

/* header
--------------------------------------------------*/
	#gHeader {
		width: 100%;
		margin-bottom: 66px;
	}
	#logoArea {
		float: left;
		padding-top: 34px;
	}
	#logo a {
		display: block;
		overflow: hidden;
		width: 395px;
		height: 52px;
		border-bottom: none;
		background: url(../img/logo.png) no-repeat left top;
		text-indent: -9999px;
	}
	html.retina #logo a {
		background-image: url(../img/retina/logo.png);
		-webkit-background-size: 395px 52px;
		background-size: 395px 52px;
	}
	#navMenu {
		display: none;
	}
	#hNavArea {
		float: right;
		width: 455px;
	}
	#hSearch {
		float: right;
		width: 145px;
		height: 30px;
		border-bottom: #f1832c solid 1px;
	}
	#hSearch .text {
		display: block;
		float: left;
		width: 121px;
		height: 20px;
		margin: 0;
		padding: 6px 0 4px;
		border: none;
		background: none;
		font-size:12px;
		line-height: 20px;
		outline: none;
	}
	#hSearch .submit {
		display: block;
		overflow: hidden;
		float: right;
		width: 24px;
		height: 30px;
		margin: 0;
		padding: 0;
		border: none;
		background: url(../img/bt-search.png) no-repeat left top;
		text-indent: -9999px;
		cursor: pointer;
		outline: none;
	}
	html.retina #hSearch .submit {
		background-image: url(../img/retina/bt-search.png);
		-webkit-background-size: 48px 60px;
		background-size: 48px 60px;
	}
	#hSearch .submit:hover {
		background-position: left bottom;
	}
	#hLang {
		height: 26px;
		font-size:92.3%;
		line-height: 1.92;
		letter-spacing: 0.1em;
	}
	#hLang li {
		float: left;
		margin-right: 10px;
		padding-top: 3px;
	}
	#hLang li.other {
		margin-right: 0;
	}
	#hLang li.other a {
		padding-left: 10px;
		border-left: #333333 solid 1px;
	}
	#hLang li.on {
		padding-top: 0;
		border-top: #f1832c solid 3px;
	}
	#hLang li a {
		border-bottom: none;
		color: #999999 !important;
	}
	#hLang li.on a,
	#hLang li a:hover {
		color: #f1832c !important;
	}
	#gNav {
		clear: both;
		width: 455px;
		height: 50px;
		padding-top: 7px;
		line-height: 1.93;
		letter-spacing: 0.15em;
	}
	#gNav li a {
		border-bottom: none;
		color: #333333 !important;
	}
	#gNav li.on a,
	#gNav li a:hover {
		color: #f1832c !important;
	}
	#gNav li {
		float: left;
		width: 145px;
		margin-left: 10px;
	}
	#gNav li.nav01,
	#gNav li.nav03 {
		margin-left: 0;
	}
	#gNav li.nav02 {
		width: 300px;
	}
	#hSNS {
		display: none;
	}


/* en
--------------------------------------------------*/
	body.en #gNav li {
		width: 112px;
	}
	body.en #gNav li.nav02 {
		width: 333px;
	}
	body.en #gNav li.nav04 {
		width: 178px;
	}


/* TB
--------------------------------------------------*/
@media only screen and (max-width:1023px) {

	#logoArea {
		padding-top: 10px;
	}
	#logo a {
		width: 215px;
		height: 72px;
		background-image: url(../img/logo_tb.png);
	}
	html.retina #logo a {
		background-image: url(../img/retina/logo_tb.png);
		-webkit-background-size: 215px 72px;
		background-size: 215px 72px;
	}

}


/* SP
--------------------------------------------------*/
@media only screen and (max-width:767px) {

/* header */
	#gHeader {
		height: 60px;
		margin-bottom: 10px;
	}
	#logoArea {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		height: 32px;
		padding: 14px 0;
		background: #ffffff;
	}
	#logo {
		float: left;
		margin-left: 10px;
	}
	#logo a {
		width: 235px;
		height: 31px;
		background-image: url(../img/logo_sp.png);
	}
	html.retina #logo a {
		background-image: url(../img/retina/logo_sp.png);
		-webkit-background-size: 235px 31px;
		background-size: 235px 31px;
	}
	#navMenu {
		display: block;
		overflow: hidden;
		float: right;
		width: 41px;
		height: 33px;
		margin-right: 10px;
		background: url(../img/icon-nav.gif) no-repeat left top;
		text-indent: -9999px;
		cursor: pointer;
	}
	html.retina #navMenu {
		background-image: url(../img/retina/icon-nav.gif);
		-webkit-background-size: 41px 33px;
		background-size: 41px 33px;
	}
	#hNavArea {
		visibility: hidden;
		position: fixed;
		top: 0;
		right: 0;
		z-index: -1;
		float: none;
		width: 100%;
		height: 100%;
	}
	.menuOPEN #hNavArea {
		z-index: 1;
	}
	#hNavArea .inner {
		position: relative;
		width: 260px;
		height: 100%;
		margin-left: auto;
		background: #f3f1e9;
	}
	#hSearch {
		position: absolute;
		top: 47px;
		left: 30px;
		float: none;
		width: 200px;
		padding-bottom: 6px;
	}
	#hSearch .text {
		width: 176px;
	}
	#hLang {
		position:absolute;
		top: 0;
		left: 30px;
		float: none;
		width: 230px;
		font-size: 107.7%;
		line-height: 1.86;
	}
	#hLang li {
		padding-top: 5px;
	}
	#hLang li.on {
		border-top-width: 5px;
	}
	#gNav {
		width: 200px;
		height: auto;
		margin: 0 30px;
		padding-top: 115px;
		line-height: 2.08;
	}
	#gNav li {
		float: none;
		width: 200px !important;
		margin: 0;
		border-bottom: #ffffff solid 1px;
	}
	#gNav li:first-child {
		border-top: #ffffff solid 1px;
	}
	#gNav li a {
		display: block;
		position: relative;
		padding: 12px 25px 11px 10px;
	}
	#gNav li a:after {
		content: '>';
		position: absolute;
		top: 50%;
		right: 5px;
		margin-top: -0.85em;
		color: #333333 !important;
		font-size: 123.1%;
		font-weight: 300;
		line-height: 1.69;
		letter-spacing: 0.15em;
	}
	#hSNS {
		display: block;
		width: 75px;
		height: 30px;
		margin: 20px 30px 0 auto;
	}
	#hSNS li {
		float: left;
	}
	#hSNS li.twitter {
		margin-right: 15px;
	}
	#hSNS li a {
		display: block;
		overflow: hidden;
		width: 30px;
		height: 30px;
		border: none;
		background-repeat: no-repeat;
		background-position: left top;
		text-indent: -9999px;
	}
	#hSNS li.twitter a {
		background-image: url(../img/icon-twitter02.gif);
	}
	#hSNS li.facebook a {
		background-image: url(../img/icon-facebook02.gif);
	}
	html.retina #hSNS li a {
		-webkit-background-size: 30px 30px;
		background-size: 30px 30px;
	}
	html.retina #hSNS li.twitter a {
		background-image: url(../img/retina/icon-twitter02.gif);
	}
	html.retina #hSNS li.facebook a {
		background-image: url(../img/retina/icon-facebook02.gif);
	}

}