@charset "UTF-8";
/**
 * *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-*
 *
 *  群馬県クレー射撃場
 *  2016.03.28
 *
 * *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-*
**/

body {
  color: #555;
  font-size: 16px;
  line-height: 1.6;
  background: #FFF;
}

.inner {
  width: 980px;
  margin: 0 auto;
}
@media screen and (max-width: 768px){
  .inner {
    width: 100%;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
  }
}

.sp-header {
  display: none;
}
/* ------------------ */
	/* humberger-menu */
	/* ------------------ */
  @media screen and (max-width: 768px){
	.sp-header {
		padding: 0 5%;
    background: rgba(0, 20, 32, 1);
    display: flex;
    height: 74px;
    justify-content: space-between;
    align-items: center;
	}
    
/* 以下、ハンバーガーボタン */
	.sp-header .burger-btn {
		display: block;
		height: 39px;
		position: relative;
		width: 39px;
		z-index: 3;
    /* codepenの挙動のため */
		background-color: transparent;
		border: none;
	}
  
	.sp-header .bar {
		background-color: #fff;
		display: block;
		height: 1px;
		left: 50%;
		position: absolute;
		transform: translateX(-50%);
		width: 20px;
	}
	.sp-header .bar_top {
		top: 10px;
	}
	.sp-header .bar_mid {
		top: 50%;
		transform: translate(-50%,-50%);
	}
	.sp-header .bar_bottom {
		bottom: 10px;
	}
	.sp-header .burger-btn.close .bar_top {
		transform: translate(-50%,10px) rotate(45deg);
		transition: transform .3s;
	}
	.sp-header .burger-btn.close .bar_mid {
		opacity: 0;
		transition: opacity .3s;
	}
	.sp-header .burger-btn.close .bar_bottom {
		transform: translate(-50%,-8px) rotate(-45deg);
		transition: transform .3s;
	}
  /* スクロール制御 */
  .sp-header .noscroll{
    overflow: hidden;
  }
  
  /* 以下、ハンバーガーメニュー */
	.sp-header .nav-wrapper {
    visibility: hidden;
		height: 100vh;
		left: 0;
		position: fixed;
		top: 0;
		width: 100vw;
    opacity: 0;
    transition: opacity .5s;
		z-index: 2;/*キービジュアルと.btn_triggerとの重なりの前後関係を調整*/
	}
  
  .sp-header .header-nav {
		background-color: rgba(0, 20, 32, 1);
		height: 100%;
		width: 100%;
		z-index: 2;
	}
	.sp-header .nav-list {
		display: block;
		text-align: center;
    margin: auto;
    width: 90%;
    padding-top: 110px;
	}
	.sp-header .nav-item {
		margin-bottom: 20px;
		margin-right: 0;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,.4);
	}
	.sp-header .nav-item a{
    color:#fff;
    text-decoration: none;
    text-align: left;
    display: block;
	}
  
  /* メニューオープン時 */
	.nav-wrapper.fade {
		opacity: 1;
		visibility: visible;
	}
}

/* ---------------------------------------------------------------------------
//  header
--------------------------------------------------------------------------- */
header {
  background: url(../img/bg1.jpg) center center / cover no-repeat;
  height: 114px;
}


header div.logo {
  float: left;
  padding-top: 30px;
}


@media screen and (max-width: 768px){
  header{
    display: none;
  }
}

/* ---------------------------------------------------------------------------
//  nav
--------------------------------------------------------------------------- */
nav {
  float: right;
  width: 677px;
  padding-top: 40px;
}
nav ul li { float: left; }
nav ul li a {
  display: block;
  height: 50px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

nav ul li:nth-child(1) a	{ background: url(../img/gnav.png) 0 top no-repeat; width: 170px; }
nav ul li:nth-child(2) a	{ background: url(../img/gnav.png) -170px top no-repeat; width: 98px; }
nav ul li:nth-child(3) a	{ background: url(../img/gnav.png) -268px top no-repeat; width: 113px; }
nav ul li:nth-child(4) a	{ background: url(../img/gnav.png) -381px top no-repeat; width: 98px; }
nav ul li:nth-child(5) a	{ background: url(../img/gnav.png) -479px top no-repeat; width: 114px; }
nav ul li:nth-child(6) a	{ background: url(../img/gnav.png) -593px top no-repeat; width: 84px; }

nav ul li:nth-child(1) a:hover	{ background: url(../img/gnav.png) 0 -50px no-repeat; width: 170px; }
nav ul li:nth-child(2) a:hover	{ background: url(../img/gnav.png) -170px -50px no-repeat; width: 98px; }
nav ul li:nth-child(3) a:hover	{ background: url(../img/gnav.png) -268px -50px no-repeat; width: 113px; }
nav ul li:nth-child(4) a:hover	{ background: url(../img/gnav.png) -381px -50px no-repeat; width: 98px; }
nav ul li:nth-child(5) a:hover	{ background: url(../img/gnav.png) -479px -50px no-repeat; width: 114px; }
nav ul li:nth-child(6) a:hover	{ background: url(../img/gnav.png) -593px -50px no-repeat; width: 84px; }

nav ul li.active:nth-child(1) a	{ background: url(../img/gnav.png) 0 -50px no-repeat; width: 170px; }
nav ul li.active:nth-child(2) a	{ background: url(../img/gnav.png) -170px -50px no-repeat; width: 98px; }
nav ul li.active:nth-child(3) a	{ background: url(../img/gnav.png) -268px -50px no-repeat; width: 113px; }
nav ul li.active:nth-child(4) a	{ background: url(../img/gnav.png) -381px -50px no-repeat; width: 98px; }
nav ul li.active:nth-child(5) a	{ background: url(../img/gnav.png) -479px -50px no-repeat; width: 114px; }
nav ul li.active:nth-child(6) a	{ background: url(../img/gnav.png) -593px -50px no-repeat; width: 84px; }


/* ---------------------------------------------------------------------------
//  footer
--------------------------------------------------------------------------- */
footer {
  background: url(../img/bg1.jpg) center center / cover no-repeat;
  padding-top: 50px; margin:0;
}

footer .foot-logo {
  background: url(../img/foot-logo.png) center top no-repeat;
  padding-top: 90px;
  width: 240px;
  text-align: center;
  float: left;

}

footer .info { float: right; margin: 0px; height:170px; padding:0; background:none;}
footer .fax { float: left; }

footer .foot-menu {
  margin-top: 00px;
  background: rgba(0, 20, 32, 0.5);
  padding: 10px 0;
}

footer .foot-menu p.copy {
  float: left;
  font-size: 12px;
  color: #FFF;
  padding-top: 3px;
}

footer .foot-menu ul {
  float: right;
}
footer .foot-menu ul li {
  float: left;
  border-right: 1px solid #335266;
  font-size: 13px;
  padding-right: 1em;
  margin-right: 1em;
}
footer .foot-menu ul li:last-child { border-right: none; padding: 0; margin: 0; }
footer .foot-menu ul li a { color: #FFF; }
footer .foot-menu ul li a:hover { color: #BACAD1; }


@media screen and (max-width: 768px){
  footer .foot-logo {
    background: url(../img/foot-logo.png) center top no-repeat;
    padding-top: 90px;
    width: 240px;
    text-align: center;
    float: none;
    margin: auto;
  }
  footer .info {
    float: none;
    margin: 40px auto;
    height:auto;
    width:100%;
    padding:0;
    background:none;}
  footer .info img{
    width: 100%;
    height: auto;
  }
  footer .foot-menu ul {
    display: none;
  }
}