/*スマホドロワー***************************************************************************/

.sideclose{
	font-size:0.6em !important;	
	width:20%;
	padding:3px 3px;
	margin:8px;
	text-align:center;
	border:1px solid #DADADA;}
	.sideclose a:hover{
		color:#FFF !important;}
.sideclose:hover{
	background-color:#B7B7B7;
	border:1px solid #949494;}
	
.sitelink{
	font-size:0.8em;
	text-align:right;
	padding:12px;
	background-color:#FFF;
	border-right: 1px solid #F0F0F0;}
.sitelink a{
	display:block;
	color:#E5005A;
	padding:0 20px 0 0;
	background:url(/images/icon_menu_splink.png) no-repeat right;}
.sitelink a:hover{
	color:#3074ff;}
	
ul.sidelist li{
	position:relative;}
ul.childmenu {
	display:none;}
.splogo{
	float:left;
	margin:0 0;
	width:110px;
	height:75px;
	overflow:hidden;}

.splogo img{
	width:110px;
	height:auto;
	margin-top:0;}
	
	
.splogo img.sp110{
	display:inherit;}
	
.splogo img.sp320{
	display:none;}

@media screen and (max-width: 375px) {
.splogo{
	float:left;
	margin:0 0;
	width:110px;
	height:65px;}

.splogo img{
	width:110px;
	height:auto;
	margin-top:-3px;}
	}
	
@media screen and (max-width: 360px) {
.splogo{
	float:left;
	margin:8px 0 0 0;
	width:60px;
	height:65px;}
	
.splogo img.sp110{
	display:none;
}
.splogo img.sp320{
	display:inherit;
	width:50px;
	height:auto;
	margin-top:0;}
	

.spmenu{
	width:60px;
	height:75px; 
  position: relative;
  /*border:1px solid #EFEFEF;*/
	background:url(../images/head/hd_bg_sp.png) right no-repeat;

	}
}
.sidelist .child {
    display: none;
}

@media screen and (min-width: 770px) {
.spmenu{
	display:none;}
}

.spmenu{
	width:100%;
	height:75px; 
  position: relative;
  /*border:1px solid #EFEFEF;*/
  background:url(../images/head/hd_bg_sp.png) right no-repeat;
	}

.hngmenubtn{
	width:30px;
	margin:15px 0 0 3px; 
	float:left;}	

.spbtns{
	float:right;
	}	
	
.menu-trigger,
.menu-trigger span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}


@media screen and (max-width: 768px) {
.menu-trigger,
.menu-trigger span {
	display: inline-block;
	transition: none;
	box-sizing: border-box;
}

}
.menu-trigger {
	position: relative;
	width: 35px;
	height: 30px;
}
.menu-trigger span {
	position: absolute;
	left: 0;
	width: 60%;
	height: 2px;
	background-color: #fff;
	border-radius: 4px;
}
.menu-trigger span:nth-of-type(1) {
	top: 5px;
}
.menu-trigger span:nth-of-type(2) {
	top: 14px;
}
.menu-trigger span:nth-of-type(3) {
	bottom: 5px;
}
/*
.menu-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(10px) rotate(-45deg);
	transform: translateY(10px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
	opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-8px) rotate(45deg);
	transform: translateY(-8px) rotate(45deg);
}
*/


	
/*スマホ用ヘッダ　ボタンツールチップ***************************************************************************/



nav.sphead {
  width:100%;
  height:55px;
  margin:4px 0 0 0;
}

nav.sphead ul {
  margin: 0;
  padding: 0;
  display: inline;
  width: auto;
  height: auto !important;
  list-style: none;
}

nav.sphead ul li {
  /*float: right;*/
  display:inline-block;
  margin: 0;
  padding: 0;
  cursor: pointer;
}


nav.sphead .has-child, nav.sphead .has-child2, nav.sphead .has-child3, nav.sphead .has-child4, nav.sphead .has-child {
  left: 0;
}

nav.sphead .has-child .dropdown, nav.sphead .has-child2 .dropdown, nav.sphead .has-child3 .dropdown, nav.sphead .has-child4 .dropdown, nav.sphead .has-child5 .dropdown  {
  position: absolute;
  left: 0;
  z-index: 99;
  display: none;
  margin: 6px auto;
  width: 100%;
  background: #fff;
  
}

/*ランドスケープ時のメニュースクロール*/
@media screen and (max-height: 415px)  and (orientation: landscape){
	nav.sphead .has-child .dropdown, nav.sphead .has-child2 .dropdown, nav.sphead .has-child3 .dropdown, nav.sphead .has-child4 .dropdown, nav.sphead .has-child5 .dropdown  {
height: auto;
max-height: 350px;
}
}

@media screen and (max-height: 380px)  and (orientation: landscape){
	nav.sphead .has-child .dropdown, nav.sphead .has-child2 .dropdown, nav.sphead .has-child3 .dropdown, nav.sphead .has-child4 .dropdown, nav.sphead .has-child5 .dropdown  {
height: auto;
max-height: 310px;
}}

@media screen and (max-height: 320px)  and (orientation: landscape){
	nav.sphead .has-child .dropdown, nav.sphead .has-child2 .dropdown, nav.sphead .has-child3 .dropdown, nav.sphead .has-child4 .dropdown, nav.sphead .has-child5 .dropdown  {
height: auto;
max-height: 260px;
padding-bottom:80px;
}
}

@media screen and (max-width: 415px)  and (orientation: landscape){
	nav.sphead .has-child .dropdown, nav.sphead .has-child2 .dropdown, nav.sphead .has-child3 .dropdown, nav.sphead .has-child4 .dropdown, nav.sphead .has-child5 .dropdown  {
height: auto;
max-height: 350px;
}
}

@media screen and (max-width: 380px)  and (orientation: landscape){
	nav.sphead .has-child .dropdown, nav.sphead .has-child2 .dropdown, nav.sphead .has-child3 .dropdown, nav.sphead .has-child4 .dropdown, nav.sphead .has-child5 .dropdown  {
height: auto;
max-height: 300px;
}}

@media screen and (max-width: 320px)  and (orientation: landscape){
	nav.sphead .has-child .dropdown, nav.sphead .has-child2 .dropdown, nav.sphead .has-child3 .dropdown, nav.sphead .has-child4 .dropdown, nav.sphead .has-child5 .dropdown  {
height: auto;
max-height: 260px;
padding-bottom:80px;
}
}
/*上向き矢印の位置*/
nav.sphead .has-child .dropdown:after {
  position: absolute;
  top: -10px;
  right: 145px;
  margin-left: -10px;
  content: "";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent white transparent;
  
}



@media screen and (max-width: 420px) {
nav.sphead .has-child .dropdown:after {
	
  right: 108px;}

}


@media screen and (max-width: 400px) {
nav.sphead .has-child .dropdown:after {
	
  right: 102px;}

}
nav.sphead .has-child2 .dropdown:after {
  position: absolute;
  top: -10px;
  right: 217px;
  margin-left: -10px;
  content: "";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent white transparent;
  
}

@media screen and (max-width: 420px) {
nav.sphead .has-child2 .dropdown:after {
	
  right: 185px;}

}


@media screen and (max-width: 400px) {
	
nav.sphead .has-child2 .dropdown:after {
	
  right: 172px;}
}

nav.sphead .has-child3 .dropdown:after {
  position: absolute;
  top: -10px;
  right: 170px;
  margin-left: -10px;
  content: "";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent white transparent;
  
}

nav.sphead .has-child4 .dropdown:after {
  position: absolute;
  top: -10px;
  right: 100px;
  margin-left: -10px;
  content: "";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent white transparent;
  
}

nav.sphead .has-child5 .dropdown:after {
  position: absolute;
  top: -10px;
  right: 25px;
  margin-left: -10px;
  content: "";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent white transparent;
  
}

nav.sphead .has-child .dropdown > li, nav.sphead .has-child2 .dropdown > li, nav.sphead .has-child3 .dropdown > li, nav.sphead .has-child4 .dropdown > li, nav.sphead .has-child5 .dropdown > li  {
  float: left;
  width: 100%;
  font-size: 0.8em;
  font-weight: 300;
  color: #333;
  border-bottom: 1px solid #EFEFEF;
  padding-top:15px;
}


@media screen and (max-width: 360px) {
nav.sphead .has-child .dropdown > li, nav.sphead .has-child2 .dropdown > li, nav.sphead .has-child3 .dropdown > li, nav.sphead .has-child4 .dropdown > li, nav.sphead .has-child5 .dropdown > li  {
  padding-top:3px;
}
}



@media screen and (max-height: 415px)  and (orientation: landscape){

nav.sphead .has-child .dropdown > li, nav.sphead .has-child2 .dropdown > li, nav.sphead .has-child3 .dropdown > li, nav.sphead .has-child4 .dropdown > li, nav.sphead .has-child5 .dropdown > li  {
  padding-top:3px;
height: auto;
max-height: 350px;
overflow-x: hidden;
}


nav.sphead .has-child .dropdown:after{
	right:108px;}
nav.sphead .has-child2 .dropdown:after{
	right:180px;}
	
}

@media screen and (max-height: 380px)  and (orientation: landscape){

nav.sphead .has-child .dropdown > li, nav.sphead .has-child2 .dropdown > li, nav.sphead .has-child3 .dropdown > li, nav.sphead .has-child4 .dropdown > li, nav.sphead .has-child5 .dropdown > li  {
  padding-top:3px;
height: auto;
max-height: 300px;
overflow-x: hidden;
}


nav.sphead .has-child .dropdown:after{
	right:108px;}
nav.sphead .has-child2 .dropdown:after{
	right:180px;}
}

@media screen and (max-height: 320px)  and (orientation: landscape){

nav.sphead .has-child .dropdown > li, nav.sphead .has-child2 .dropdown > li, nav.sphead .has-child3 .dropdown > li, nav.sphead .has-child4 .dropdown > li, nav.sphead .has-child5 .dropdown > li  {
  padding-top:3px;
height: auto;
max-height: 260px;
overflow-x: hidden;
padding-bottom:80px;
}

nav.sphead .has-child .dropdown:after{
	right:108px;}
nav.sphead .has-child2 .dropdown:after{
	right:180px;}
}




nav.sphead .has-child .dropdown li a, nav.sphead .has-child2 .dropdown li a, nav.sphead .has-child3 .dropdown li a, nav.sphead .has-child4 .dropdown li a,  nav.sphead .has-child5 .dropdown li a  {
  display: block;
  color:#333;
  /*padding: 10px;*/
}
nav.sphead .has-child .dropdown li a:hover, nav.sphead .has-child2 .dropdown li a:hover, nav.sphead .has-child3 .dropdown li a:hover, nav.sphead .has-child4 .dropdown li a:hover, nav.sphead .has-child5 .dropdown li a:hover {
  color: #2693FF;
}

nav.sphead #toggle-menu {
  position: absolute;
  right: 1em;
  top: 0;
  display: none;
  cursor: pointer;
  font-size: 1.5em;
  color: #FFF4E1;
}
nav.sphead .menumds{
	width:80%;
	padding:0 0 3px 0;
	margin:0 auto;
	font-size:1.2em;}


nav.sphead .menumds span{
	display:block;
	margin:3px 0 0 0;
	font-size:0.9em;
	color:#FF0000;}
	
	
nav.sphead .menulist{
	width:80%;
	padding:12px 5px 5px 20px;
	margin:0 auto 8px auto;
	border-top:1px dotted #DDD;}


@media screen and (max-width: 450px) {
	
nav.sphead .menulist{
	width:90%;
	padding:8px 5px 5px 20px;
	margin:0 auto 0 auto;
	border-top:1px dotted #DDD;}
	}

nav.sphead .ar{
	background:url(../images/head/sp_menulist_ar.png) no-repeat 5px 70%;}

.spbtnjoin{
	float:right;
	margin:8px 0 0 0;
	}
	
nav.sphead .menulist .headspmenubtn{
	width:240px;
	margin:0 auto;
	text-align:center;}

.headspmenubtn a.btnspmenulogin{
	width:110px;
	margin: 0 5px;
	text-align: center;
	white-space: nowrap;
	float:left;
	color: #000;
	font-size: 9pt;
	font-weight: bold;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 2px;
	border: 1px solid #c9c9c9 !important;
	padding: 10px 8px !important;
	text-decoration: none;
	background: -moz-linear-gradient( center top, #f9f9f9 5%, #e9e9e9 100% );
	background: -ms-linear-gradient( top, #f9f9f9 5%, #e9e9e9 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #f9f9f9), color-stop(100%, #e9e9e9) );
	background-color: #f9f9f9;
	color: #333;
	display: inline-block;
	text-shadow: 1px 1px 0px #ffffff;
	-webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
	-moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
	box-shadow: inset 0px 1px 0px 0px #ffffff;
}
.headspmenubtn a.btnspmenulogin:hover{
	color: #000;
	text-decoration: none !important;
	background: -moz-linear-gradient( center top, #FFC600 5%, #FFE599 100% ) !important;
	background: -ms-linear-gradient( top, #FFC600 5%, #FFE599 100% ) !important;
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFC600', endColorstr='#FFE599') !important;
	background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #FFC600), color-stop(100%, #FFE599) ) !important;
	background-color: #FFC600;
}



.headspmenubtn a.btnspmenulogout{
	width:110px;
	margin: 0 auto;
	text-align: center;
	white-space: nowrap;
	color: #000;
	font-size: 9pt;
	font-weight: bold;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 2px;
	border: 1px solid #c9c9c9 !important;
	padding: 10px 8px !important;
	text-decoration: none;
	background: -moz-linear-gradient( center top, #f9f9f9 5%, #e9e9e9 100% );
	background: -ms-linear-gradient( top, #f9f9f9 5%, #e9e9e9 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #f9f9f9), color-stop(100%, #e9e9e9) );
	background-color: #f9f9f9;
	color: #333;
	display: inline-block;
	text-shadow: 1px 1px 0px #ffffff;
	-webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
	-moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
	box-shadow: inset 0px 1px 0px 0px #ffffff;
}
.headspmenubtn a.btnspmenulogout:hover{
	color: #000;
	text-decoration: none !important;
	background: -moz-linear-gradient( center top, #FFC600 5%, #FFE599 100% ) !important;
	background: -ms-linear-gradient( top, #FFC600 5%, #FFE599 100% ) !important;
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFC600', endColorstr='#FFE599') !important;
	background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #FFC600), color-stop(100%, #FFE599) ) !important;
	background-color: #FFC600;
}



.headspmenubtn a.btnspmenutop{
	/*width:110px;*/
	margin: 0 5px;
	text-align: center;
	white-space: nowrap;
	color: #000;
	font-size: 9pt;
	font-weight: bold;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 2px;
	border: 1px solid #c9c9c9 !important;
	padding: 10px 8px !important;
	text-decoration: none;
	background: -moz-linear-gradient( center top, #FFE599 5%, #FFC600 100% ) !important;
	background: -ms-linear-gradient( top, #FFE599 5%, #FFC600 100% ) !important;
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFE599', endColorstr='#FFC600') !important;
	background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #FFE599), color-stop(100%, #FFC600) ) !important;
	background-color: #FFE599;
	color: #333;
	display: inline-block !important;
	text-shadow: 1px 1px 0px #ffffff;
	-webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
	-moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
	box-shadow: inset 0px 1px 0px 0px #ffffff;
}
.headspmenubtn a.btnspmenutop:hover{
lor: #000;
	text-decoration: none !important;
	background: -moz-linear-gradient( center top, #FFC600 5%, #FFE599 100% ) !important;
	background: -ms-linear-gradient( top, #FFC600 5%, #FFE599 100% ) !important;
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFC600', endColorstr='#FFE599') !important;
	background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #FFC600), color-stop(100%, #FFE599) ) !important;
	background-color: #FFC600;
}

	
@media screen and (max-width: 400px) {
.headspmenubtn a.btnspmenutop{
	width:70px;
	margin: 0 2px 0 3px;}
}