@charset "utf-8";

/* =======================================

	BTN

======================================= */


#GNAVI{
	top: 0;
	left: 0;
	width: 100%;
	height:58px;
	position: fixed;
	background: #ffffff;
	z-index:200;
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;

}



.span_menu {display:none;}


#GNAVI ul{margin:0px auto; padding:0; width:980px; height:58px;  list-style-type : none;}

#GNAVI li { display: inline; padding:0; margin:0; }

#GNAVI #gmenu_logo a {background-image:url(btn/hlogo.jpg); background-position:5px; float: left; width:400px; height:58px; background-repeat:no-repeat; margin:0; padding:0; display:block; background-color:#fff;}

#GNAVI #gmenu_01 a {background-image:url(btn/gbtn01.gif); float: left; width:76px; height:58px; background-repeat:no-repeat; margin:0; padding:0; display:block; background-color:#fff;}
#GNAVI #gmenu_01 a:hover {background-image:url(btn/gbtn01o.gif); width:76px; height:58px; background-repeat:no-repeat; margin: 0; padding:0; display:block;}

#GNAVI #gmenu_02 a{float: left; background-image:url(btn/gbtn02.gif);  width:76px; height:58px; background-repeat:no-repeat; margin:0; padding:0;  display:block;}
#GNAVI #gmenu_02 a:hover {background-image:url(btn/gbtn02o.gif); width:76px; height:58px; background-repeat:no-repeat; margin:0; padding:0; display:block;}

#GNAVI #gmenu_03 a{float: left; background-image:url(btn/gbtn03.gif);  width:76px; height:58px; background-repeat:no-repeat; margin:0; padding:0; display:block;}
#GNAVI #gmenu_03 a:hover {background-image:url(btn/gbtn03o.gif); width:76px; height:58px; background-repeat:no-repeat; margin:0; padding:0; display:block;}

#GNAVI #gmenu_04 a{float: left; background-image:url(btn/gbtn04.gif);  width:76px; height:58px; background-repeat:no-repeat; margin:0; padding:0; display:block;}
#GNAVI #gmenu_04 a:hover {background-image:url(btn/gbtn04o.gif); width:76px; height:58px; background-repeat:no-repeat; margin:0; padding:0; display:block;}

#GNAVI #gmenu_05 a{float: left; background-image:url(btn/gbtn05.gif);  width:76px; height:58px; background-repeat:no-repeat; margin:0; padding:0; display:block;}
#GNAVI #gmenu_05 a:hover {background-image:url(btn/gbtn05o.gif); width:76px; height:58px; background-repeat:no-repeat; margin:0; padding:0; display:block;}

#GNAVI #gmenu_06 a{float: left; background-image:url(btn/gbtn06.gif);  width:76px; height:58px; background-repeat:no-repeat; margin:0; padding:0; display:block;}
#GNAVI #gmenu_06 a:hover {background-image:url(btn/gbtn06o.gif); width:76px; height:58px; background-repeat:no-repeat; margin:0; padding:0; display:block;}

#GNAVI #gmenu_07 a{float: left; background-image:url(btn/gbtn07.gif);  width:76px; height:58px; background-repeat:no-repeat; margin:0; padding:0; display:block;}
#GNAVI #gmenu_07 a:hover {background-image:url(btn/gbtn07o.gif); width:76px; height:58px; background-repeat:no-repeat; margin:0; padding:0; display:block;}

#GNAVI .gmenu_00{float:left; background-image:url(btn/gbtn00.gif);  width:1px; height:64px; background-repeat:no-repeat; margin:0; padding:0; display:block;}



/* =======================================

	TOP BizBTN

======================================= */

.bzbox{
	width:420px;
	height:260px;
}
.bz_const p{
	margin-top:140px;
	text-align:center;
}

.bz_const .linkbtn{
	position: absolute;
	bottom: 0;
	right:0;
}

.bz_const {
		width:420px;
	height:260px;
	margin:20px;
	border: 2px solid #ccc;
	box-sizing: border-box;
	box-shadow: 0px 0px 5px 0px #ccc; 
	border-radius: 8px; 
	position: relative;
	overflow: hidden;
	float: left; background-image:url(btn/top_const.jpg); 
	background-repeat:no-repeat; margin:0; padding:0; display:block;
	
}
.bz_const :hover {
		width:420px;
	height:260px;
	margin:20px;
	border: 2px solid #ccc;
	box-sizing: border-box;
	box-shadow: 0px 0px 5px 0px #ccc; 
	border-radius: 8px; 
	position: relative;
	overflow: hidden;
	background-image:url(btn/top_consto.jpg); 
	background-repeat:no-repeat; margin:0; padding:0; display:block;
}




/* =======================================

	SP BTN

======================================= */



#spHD{
	top: 0;
	left: 0;
	width: 100%;
	height:60px; 
	position: fixed;
	background-color: #ffffff;
	z-index:200;
	filter:alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}

#spHD .splogo{
	margin:10px 0 0 0;
	max-width: 50%;
	}


.header {
/*  position: relative; 
  padding: 0px;
  height: 60px;  */
}


.hamburger {
  position: fixed;
  top: 2px;
  right: 10px;
  z-index: 201;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.hamburger__line {
  position: absolute;
  left: 11px;
  width: 26px;
  height: 2px;
  background-color: #333;
  transition: all .4s;
}

.hamburger__line:nth-of-type(1) {
  top: 14px;
}
.hamburger__line:nth-of-type(2) {
  top: 23px;
}
.hamburger__line:nth-of-type(3) {
  top: 32px;
}

/* メニューオープン時 */
.hamburger.active .hamburger__line:nth-of-type(1) {
  transform: translateY(9px) rotate(-45deg);
}
.hamburger.active .hamburger__line:nth-of-type(2) {
  opacity: 0;
}
.hamburger.active .hamburger__line:nth-of-type(3) {
  transform: translateY(-9px) rotate(45deg);
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100vh;
  background-color: #fff;
  box-shadow: 2px 0 4px rgba(0,0,0,.1);
  transform: translateX(-100%);
  transition: transform .4s;
  z-index: 210;
}

.nav.active {
  transform: translateX(0);
}

.nav__list {
  margin: 0;
  padding: 50px 0 0;
  list-style: none;
}

.nav__item {
  padding: 0 20px;
}

.nav__link {
  display: block;
  padding: 7px 0;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #eee;
}