.clearfix::after {
  display: table;
  clear: both;
  content: "";
}

#site-header .spOnly {
  display: none !important;
}
@media (max-width: 959px){
  #site-header .spOnly {
    display: block !important;
  }
}
#site-header .pcOnly {
  display: block !important;
}
@media only screen and (max-width: 959px) {
  #site-header .pcOnly {
    display: none !important;
  }
}


#site-header {
	position: fixed;
	z-index: 10000;
	top: 0;
	left: 0;
	bottom: 0;
	min-width: 200px;
	background: #323232;
	color: #FFF;
	line-height: 1.5;
}
#site-header .structure-body {
    padding: 0;
}
#site-header .navigation ul {
	margin: 0;
	padding: 0;
}
#site-header .navigation li {
	margin: 0;
	line-height: 0;
}
#site-header .navigation li a{
	display: block;
}
#site-header .navigation li ul{
	width: 200px;
}
#site-header .navigation li ul li{
	float: left;
}






#site-function .spOnly {
  display: none !important;
}
@media (max-width: 959px){
  #site-function .spOnly {
    display: block !important;
  }
}
#site-function .pcOnly {
  display: block !important;
}
@media only screen and (max-width: 959px) {
  #site-function .pcOnly {
    display: none !important;
  }
}



#site-function {
	position: fixed;
	z-index: 20000;
	left: 0;
	top: 0;
	bottom: 0;
	padding: 0;
	height: 100%;
	background: #282828;
	color: #fff;
	line-height: 1.5;
}


#site-function .menu-list {
    position: absolute;
		top: 589px;
		/* top: 515px; */
    bottom: 0;
    right: -200px;
    float: right;
    height: 100%;
    overflow: auto;
}
#site-function[aria-expanded="true"] .menu-list {
	display: none;
}

#site-function .menu {
	min-height: 100%;
	background: none;
	color: #fff;
}
#site-function .menu ul {
	margin: 0;
	padding: 0;
}
#site-function .menu li {
	float: left;
	margin: 0;
	padding: 0;
	width: 100px;
	border-top: none;
}
#site-function .menu a {
    position: relative;
    margin: 0;
    text-decoration: none;
}









@media (max-height: 700px){
	#site-header .title {
		height: 140px;
		overflow: hidden;
		border-bottom: #626262 1px solid;
	}
	#site-header .title img{
		margin-top: -40px;
	}

	#site-header .navigation li {
    margin: 0;
		line-height: 0;
		overflow: hidden;
		border-bottom: #626262 1px solid;
	}
	#site-header .navigation li img{
		margin: -1.5px 0;
		width: 90%;
	}
	#site-function .menu-list {
    top: 469px;
	}
}











@media (max-width: 959px){
	#site-header {
		bottom: auto;
    background: #323232;
	}
	#site-header .structure-body {
    padding: 0;
	}
	#site-header .title {
		position: relative;
		z-index: 40;
		float: left;
		width: 38.2%;
		margin: 0;
		border-right: #666666 1px solid;
	}
	#site-header .title img {
		width: 100%!important;
		height: auto;
		float: none;
	}
	#site-header * {
		box-sizing: border-box;
	}
	.sp_h_btn {
    display: block;
    position: relative;
    z-index: 11;
    top: 0;
		right: 0;
		padding: 0;
		margin: 0;
	}
	.sp_h_btn li {
    float: left;
    width: 15.7%;
		margin-left: 0;
		line-height: 0;
		border-right: #666666 1px solid;
	}
	.sp_h_btn li img{
    width: 100%;
	}


	#site-function {
    top: -514px;
    /* top: -433px; */
    right: 0;
    padding: 0;
    bottom: auto;
		min-width: 640px;
		background: #323232;
    height: auto;
    border-bottom: none;
    font-size: 185.71429%;
    line-height: 1.15385em;
    overflow: visible;
    transition: top 0.4s ease-in-out;
	}

	#site-function .navigation-list {
    display: block;
    padding: 0;
    border-top: none;
	}
	#site-function .menu-list {
		display: block;
    position: static;
    float: none;
    margin: 0;
    padding: 0;
    border-bottom: none;
	}
	#site-function[aria-expanded="true"] .menu-list {
    display: block;
	}

	#site-function .menu h1 {
		right: 0;
		margin: 0;
		bottom: -16vw;
		width: 13.3vw;
		height: auto;
		border-top: #666666 1px solid;
	}
	#site-function .menu h1 img{
		width: 100%;
	}
	#site-function .menu ul {
    width: 100%;
	}
	#site-function .menu li {
    float: left;
    margin: 0;
    width: 25%;
    border: 0 none;
	}
	#site-function .menu li a {
		width: 100%;
		background: url(/assets/img/header/header_menu_op01.png) 50% 50% no-repeat #323232;
		background-size: contain;
		border-bottom: #666666 1px solid;
		border-right: #666666 1px solid;
		border-left: #666666 1px solid;
		box-sizing: border-box;
	}
	#site-function .menu li:first-child a {
		border-left: none;
	}
	#site-function .menu li:last-child a {
		border-right: none;
	}

	#site-function .menu li + li a {
		background-image: url(/assets/img/header/header_menu_op02.png);
	}

	#site-function .menu li + li + li a {
		background-image: url(/assets/img/header/header_menu_op03.png);
	}

	#site-function .menu li + li + li + li a {
		background-image: url(/assets/img/header/header_menu_op04.png);
	}

	#site-footer .structure-body {
    padding: 50px 20px;
	}



}