@charset "utf-8";

/*                　 　768px以上
======================================================= */
@media screen and (min-width: 768px) {

  #gnav { display: inline!important; }

/* gnav */
  #gnavArea {
    position: fixed;
		z-index: 9999;
		width: 244px;
		height: 100%;
		top: 0;
    box-shadow: 0px 0px 6px 0px #aaa;
  }
	#gnav {
		position: fixed;
		width: 244px;
		top: 75px;
    bottom: 0;
    overflow-y: auto;
	}
	#gnav:hover {z-index: 6;}

	#gnav > ul {
    margin-bottom:10px;
		background-color: #fff;
	}

	#gnav > ul > li.position {
		background-color: #e8e8e8;
	}
	#gnav > ul > li > span {
		position: relative;
		display: table;
		height: 100%;
	}

	#gnav > ul > li > span > a {
    z-index: 999;
		display: table-cell;
		width: 244px;
		padding: 10px 10px 10px 20px;
		line-height: 140%;
		color: #000;
		font-size: 100%;
		text-decoration: none;
    font-weight: bold;
		border-top: solid 1px #cacaca;
		vertical-align: middle;

		-moz-transition: background-color .3s linear;
		-webkit-transition: background-color .3s linear;
		-o-transition: background-color .3s linear;
		-ms-transition: background-color .3s linear;
		transition: background-color .3s linear;
	}
	#gnav > ul > li:last-child > span > a {border-bottom: 0 none;}
	html:not(.sp) #gnav > ul > li:hover > span > a,
	#gnav > ul > li.parent > span > a {background-color: rgba(255, 255, 255, .1);}
	#gnav > ul > li.parent:not(:last-child) > span > a {border-bottom: solid 1px rgba(255, 255, 255, .0);}
	html:not(.sp) #gnav > ul > li:last-child:hover > span > a {border-bottom: 0 none;}

	html:not(.sp) #gnav > ul > li > span > a:hover,
	#gnav > ul > li.current > span > a {background-color: #424242 !important; color: #fff;}

	#gnav > ul > li > ul {
    z-index: 5;
		position: fixed;
		display: block !important;
		height: 100%;
		width: 0;
		top: 0;
		margin: 0 0 0 244px;
    padding-top: 50px;
		overflow: hidden;
		background-color: rgba(24, 24, 24, .7);
		-moz-transition: width .3s ease-out .4s, height .3s ease-out .4s;
		-webkit-transition: width .3s ease-out .4s, height .3s ease-out .4s;
		-o-transition: width .3s ease-out .4s, height .3s ease-out .4s;
		-ms-transition: width .3s ease-out .4s, height .3s ease-out .4s;
		transition: width .3s ease-out .4s, height .3s ease-out .4s;
	}
	#gnav > ul > li:hover > ul {
		width: 194px;
	}
	#gnav > ul > li > ul:hover {overflow: visible;}

	#gnav > ul > li > ul > li {
		clear: both;
		float: right;
	}

	#gnav > ul > li > ul > li > span > a {
    z-index: 1;
		position: relative;
		display: block;
		width: 194px;
		padding: 15px 20px;
		line-height: 140%;
		color: #fff;
		font-size: 92%;
		text-decoration: none;
		-moz-transition: background-color .3s linear;
		-webkit-transition: background-color .3s linear;
		-o-transition: background-color .3s linear;
		-ms-transition: background-color .3s linear;
		transition: background-color .3s linear;
	}
	html:not(.sp) #gnav > ul > li > ul > li:hover > span > a,
	#gnav > ul > li > ul > li.parent > span > a {background-color: rgba(255, 255, 255, .1);}
	html:not(.sp) #gnav > ul > li > ul > li > span > a:hover,
	#gnav > ul > li > ul > li.current > span > a {background-color: #424242 !important;}

	#gnav > ul > li > ul > li > ul  {
		position: fixed;
		display: block !important;
		height: 100%;
		width: 0;
		top: 0;
		margin: 0 0 0 194px;
    padding-top: 50px;
		overflow: hidden;
		background-color: rgba(47, 47, 47, .7);
		-moz-transition: width .3s ease-out .4s, height .3s ease-out .4s;
		-webkit-transition: width .3s ease-out .4s, height .3s ease-out .4s;
		-o-transition: width .3s ease-out .4s, height .3s ease-out .4s;
		-ms-transition: width .3s ease-out .4s, height .3s ease-out .4s;
		transition: width .3s ease-out .4s, height .3s ease-out .4s;
	}

	#gnav > ul > li > ul:hover > li > ul  {}
	#gnav > ul > li > ul > li:hover > ul  {width: 194px;}

	#gnav > ul > li > ul > li > ul > li {
		clear: both;
		float: right;
	}

	#gnav > ul > li > ul > li > ul > li > span > a {
		position: relative;
		display: block;
		width: 194px;
    height: 100%;
		padding: 15px 20px;
		line-height: 140%;
		color: #fff;
		font-size: 92%;
		text-decoration: none;
		-moz-transition: background-color .3s linear;
		-webkit-transition: background-color .3s linear;
		-o-transition: background-color .3s linear;
		-ms-transition: background-color .3s linear;
		transition: background-color .3s linear;
	}
	html:not(.sp) #gnav > ul > li > ul > li > ul > li > span > a:hover,
	#gnav > ul > li > ul > li > ul > li.current > span > a {background-color: #424242;}

  html:not(.sp) #gnav > ul > li > span > a:hover:after,
  #gnav > ul > li.current > span > a:after,
  #gnav > ul > li.parent > span > a:after {opacity: 1;}

/* Search */
  nav.search{
    overflow:hidden;
    padding-top: 10px;
    padding-left:15px;
    padding-bottom: 12px;
    line-height:1;
  }
  nav.search input{
    display:block;
    float:left;
    -webkit-appearance: none;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    border-radius:0; 
  }
  nav.search input.searchBox{
    height:32px;
    width:167px;
    background-color:#eeeeee;
    padding:8px 8px 7px;
    color:#666666;
    overflow:hidden;
  }
  nav.search input#searchBtn{
    height:32px;
    width:45px;
    text-align:center;
    padding:0;
    line-height:22px;
    font-size:22px;
    background:#4a4a4a url(../img/common/icon_search.png) no-repeat center center;
    border:none;
    color:#ffffff;
    cursor:pointer;
  }
  
/* Button */
  #joinusBtn,
  #loginBtn,
  #passwordBtn,
  #logoutBtn {
    display: inline-block;
    width:49%;
    text-align: center;
    vertical-align: top;
  }
  #joinusBtn,
  #passwordBtn {
    margin-right: 2%;
  }
  #joinusBtn a,
  #loginBtn a,
  #logoutBtn a,
  #passwordBtn a {
    display: block;
    color: #fff;
    font-size: 100%;
    text-decoration: none;
    line-height: 1;
  }
  #joinusBtn a { padding: 6px 0 6px 15px; background: #d52425 url(../img/common/icon_joinus.png) no-repeat 5px center; }
  #joinusBtn a:hover {background-color: #e76b6c !important;}
  #loginBtn a { padding: 12px 0; background: #4a4a4a url(../img/common/icon_login.png) no-repeat 5px center; }
  #loginBtn a:hover {background-color: #7f7f7f !important;}
  #logoutBtn a { padding: 12px 10px 12px 20px; 
    background: #4a4a4a url(../img/common/icon_logout.png) no-repeat 10px center;
  }
  #logoutBtn a:hover {background-color: #7f7f7f !important;}
  #passwordBtn a { padding: 6px 10px 6px 15px; 
    /*text-indent: 15px;*/
    background: #717171 url(../img/common/icon_password.png) no-repeat 3px center;
  }
  #passwordBtn a:hover {background-color: #8b8b8b !important;}

  #contactBtn {
    margin-bottom: 5px;
    text-align: center;
  }
  #contactBtn a {
    padding: 5px 10px 5px 30px;
    background: url(../img/common/icon_contact.png) no-repeat 5px center;
    color: #d52425;
    font-size: 108%;
    font-weight: bold;
  }
  #englishBtn,
  #sitemapBtn {
    display: inline-block;
    width:45%;
    text-align: center;
  }
  #englishBtn a,
  #sitemapBtn a {
    padding-left: 15px;
    background: url(../img/common/icon_square_black.png) no-repeat left center;
    color: #000;
  }

}



/*                　 　767px以下
======================================================= */
@media screen and (max-width: 767px) {

  #logo {
    text-align: left;
	}
	#logo img {
    height: 47px;
    margin-left: 10px;
  }

	#gnav {
    padding-bottom: 10px;
 		border-top: solid 1px #333;
 		border-bottom: solid 1px #333;
    background-color: #f4f4f4;
  }
	#gnav a {
		color: #000;
		text-decoration: none;
		line-height: 140%;
    background-color: #f4f4f4;
		-moz-transition: background-color .2s linear, color .2s linear;
		-webkit-transition: background-color .2s linear, color .2s linear;
		-o-transition: background-color .2s linear, color .2s linear;
		-ms-transition: background-color .2s linear, color .2s linear;
		transition: background-color .2s linear, color .2s linear;
	}
	#gnav ul a:hover,
	#gnav .current > span > a {background-color: #424242; color: #fff;}
	#gnav .parent > span > a {background-color: rgba(159, 210, 91, .3);}

	#gnav li > span {
		position: relative;
		display: table;
		width: 100%;
	}

	#gnav > ul {
    margin-bottom: 10px;
  }
	#gnav > ul > li > span > a {
		display: table-cell;
		height: 46px;
		padding: 0 15px;
		font-size: 116%;
		border-bottom: solid 1px #333;
		overflow: hidden;
		vertical-align: middle;
	}
	#gnav > ul > li.gnav-icon > span > a {padding: 0 15px 0 15px;}

	#gnav > ul  ul {
		display: none;
		overflow: hidden;
	}

	#gnav > ul > li > ul > li > span > a {
		display: table-cell;
		padding: 12px 15px 12px 30px;
		font-size: 108%;
    color: #fff;
		background-color: #333;
		border-bottom: solid 1px #444;
		overflow: hidden;
	}

	#gnav > ul > li > ul > li > ul > li > span > a {
		display: table-cell;
		padding: 10px 15px 10px 45px;
		font-size: 108%;
    color: #fff;
		background-color: #444;
		border-bottom: solid 1px #555;
		overflow: hidden;
	}

	#sp-gnav-btn {
		position: absolute;
		z-index: 11;
		display: block;
		top: 30px;
		right: 25px;
		cursor: pointer;
	}
	#sp-gnav-btn:before,
	#sp-gnav-btn:after {
		content: "";
		position: absolute;
		z-index: 1;
		display: block;
		width: 28px;
		height: 3px;
		right: 11px;
		background-color: #fff;

		-moz-transition: -moz-transform 0.3s ease-in-out, top 0.3s linear, bottom 0.3s linear, right 0.3s linear, width 0.3s linear;
		-webkit-transition: -webkit-transform 0.3s ease-in-out, top 0.3s linear, bottom 0.3s linear, right 0.3s linear, width 0.3s linear;
		-o-transition: -o-transform 0.3s ease-in-out, top 0.3s linear, bottom 0.3s linear, right 0.3s linear, width 0.3s linear;
		-ms-transition: -ms-transform 0.3s ease-in-out, top 0.3s linear, bottom 0.3s linear, width 0.3s linear;
		transition: transform 0.3s ease-in-out, top 0.3s linear, bottom 0.3s linear, right 0.3s linear, width 0.3s linear;
	}
	#sp-gnav-btn:before {top: 5px;}
	#sp-gnav-btn:after {top: 25px;}
	html:not(.sp) #sp-gnav-btn:hover:before {width: 23px;}

	#sp-gnav-btn a {
		position: relative;
		display: block;
		width: 50px;
		height: 50px;
		padding: 35px 0 0;
		text-decoration: none;
		color: #fff;
		font-size: 10px;
		line-height: 140%;
		text-align: center;
	}

	#sp-gnav-btn a:before {
		content: "";
		position: absolute;
		display: block;
		width: 28px;
		height: 3px;
		top: 15px;
		right: 11px;
		background-color: #fff;

		-moz-transition: width 0.3s linear;
		-webkit-transition: width 0.3s linear;
		-o-transition: width 0.3s linear;
		-ms-transition: width 0.3s linear;
		transition: width 0.3s linear;
	}
	html:not(.sp) #sp-gnav-btn:hover a:before {width: 18px;}

	.sp-gnav-open #sp-gnav-btn:before {
		width: 28px !important;
		top: 16px;
		right: 7;
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.sp-gnav-open #sp-gnav-btn:after {
		width: 28px !important;
		top: 16px;
		right: 7;
		-moz-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.sp-gnav-open #sp-gnav-btn a:before {width: 0 !important;}

	#gnav > ul > li > span > .sp-gnav-layer-btn,
	#gnav > ul > li > ul > li > span > .sp-gnav-layer-btn {
		display: table-cell;
		width: 40px;
		cursor: pointer;
		-moz-transition: background-color .2s linear;
		-webkit-transition: background-color .2s linear;
		-o-transition: background-color .2s linear;
		-ms-transition: background-color .2s linear;
		transition: background-color .2s linear;
	}
	#gnav > ul > li > span > .sp-gnav-layer-btn {
		border-left: solid 1px #333;
		border-bottom: solid 1px #333;
		background-color: #f4f4f4;
}
	#gnav > ul > li > ul > li > span > .sp-gnav-layer-btn {
		border-left: solid 1px #444;
		border-bottom: solid 1px #444;
		background-color: #333;
	}
	.sp-gnav-layer-btn:before {
		content: "";
		position: absolute;
		display: block;
		width: 16px;
		height: 2px;
		top: 50%;
		right: 12px;
		margin: -1px 0 0;
		background-color: #000;
	}
	.sp-gnav-layer-btn:after {
		content: "";
		position: absolute;
		display: block;
		width: 2px;
		height: 16px;
		top: 50%;
		right: 19px;
		margin: -8px 0 0;
		background-color: #000;
		/*-moz-transition: -moz-transform .2s linear;
		-webkit-transition: -webkit-transform .2s linear;
		-o-transition: -o-transform .2s linear;
		-ms-transition: -ms-transform .2s linear;
		transition: transform .2s linear;*/
	}
	html:not(.sp) #gnav > ul > li > span > .sp-gnav-layer-btn:hover,
	#gnav > ul > li > span > .sp-gnav-layer-btn.current {
		border-left: solid 1px #333;
		border-bottom: solid 1px #333;
		background-color: #444;
	}
	#gnav > ul > li > span > .sp-gnav-layer-btn.current {
		background-color: #333;
  }
  html:not(.sp) #gnav > ul > li > span > .sp-gnav-layer-btn:hover:before,
  html:not(.sp) #gnav > ul > li > span > .sp-gnav-layer-btn:hover:after,
  html:not(.sp) #gnav > ul > li > span > .sp-gnav-layer-btn.current:after {
		background-color: #fff;
  }
	html:not(.sp) #gnav > ul > li > ul > li > span > .sp-gnav-layer-btn:hover,
	#gnav > ul > li > ul > li > span > .sp-gnav-layer-btn.current {
		border-left: solid 1px #555;
		border-bottom: solid 1px #555;
		background-color: #444;
	}
	html:not(.sp) #gnav > ul > li > ul > li > span > .sp-gnav-layer-btn:before,
  html:not(.sp) #gnav > ul > li > ul > li > span > .sp-gnav-layer-btn:after {
		background-color: #fff;
  }

	.sp-gnav-layer-btn.current:after {
		-moz-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		transform: rotate(90deg);
	}

/* Search */
  nav.search{
    width: 100%;
    overflow:hidden;
    padding-top: 10px;
    padding-bottom: 12px;
    line-height:1;
    text-align: center;
  }
  nav.search form{
    margin: 0 auto;
  }
  nav.search input{
    -webkit-appearance: none;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    border-radius:0; 
  }
  nav.search input.searchBox{
    display: inline-block;
    width:80%;
    height:40px;
    background-color:#dedede;
    padding:8px 8px 7px;
    color:#666666;
    vertical-align: top;
  }
  nav.search input#searchBtn{
    display: inline-block;
    width:45px;
    height:40px;
    text-align:center;
    padding:0;
    line-height:22px;
    font-size:22px;
    background:#4a4a4a url(../img/common/icon_search.png) no-repeat center center;
    border:none;
    color:#ffffff;
    cursor:pointer;
  }
  
/* Button */
  #joinusBtn,
  #loginBtn,
  #passwordBtn,
  #logoutBtn {
    display: inline-block;
    width:49%;
    text-align: center;
  }
  #joinusBtn a,
  #loginBtn a,
  #logoutBtn a,
  #passwordBtn a {
    display: block;
    padding: 13px 0;
    color: #fff;
    font-size: 124%;
    text-indent: 20px;
    text-decoration: none;
    line-height: 1;
  }
  #joinusBtn a {
    background: #d52425 url(../img/common/icon_joinus.png) no-repeat 15px center;
  }
  #joinusBtn a:hover {background-color: #e76b6c !important;}
  #loginBtn a {
    background: #4a4a4a url(../img/common/icon_login.png) no-repeat 5px center;
  }
  #loginBtn a:hover {background-color: #7f7f7f !important;}
  #logoutBtn a {
    background: #4a4a4a url(../img/common/icon_logout.png) no-repeat 15px center;
  }
  #logoutBtn a:hover {background-color: #7f7f7f !important;}
  #passwordBtn a {
    text-indent: 15px;
    background: #717171 url(../img/common/icon_password.png) no-repeat 3px center;
  }
  #passwordBtn a:hover {background-color: #8b8b8b !important;}

  #contactBtn {
    margin-bottom: 5px;
    text-align: center;
  }
  #contactBtn a {
    padding: 5px 10px 5px 30px;
    background: url(../img/common/icon_contact.png) no-repeat 5px center;
    color: #d52425;
    font-size: 124%;
    font-weight: bold;
  }
  #englishBtn,
  #sitemapBtn {
    display: inline-block;
    width:45%;
    font-size: 116%;
    text-align: center;
  }
  #englishBtn a,
  #sitemapBtn a {
    padding-left: 15px;
    background: url(../img/common/icon_square_black.png) no-repeat left center;
    color: #000;
  }

}