@charset "utf-8";

/*========= ナビゲーションのためのCSS ===============*/

#g-nav {
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
                                top:0;
                                right: -120%;
                                width:100%;
                                height: 100%;/*ナビの高さ*/
                                background: rgba(0, 0, 0, 0.3);
  transition: all 0.6s;
}


/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive {
                                right: 0;
}


/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list {
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width:100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション文字揃え*/
                                position: absolute;
                                z-index: 999;
                                top:0;
                                right:0;
                                padding: 20vh 0 0;
                                background: #ffe962;
                                height: 100%;
                                width: 70%;
}

/*リストのレイアウト設定*/
#g-nav li {
                                list-style: none;
                                text-align: left; 
                                color: #655119;
}

#g-nav li a {
                                color: #655119;
                                text-decoration: none;
                                padding:10px 0 10px 20px;
                                display: block;
                                letter-spacing: 0.1em;
                                position: relative;
                                font-weight: 700;
                                font-size: 16px;
}
#g-nav li a:hover {
                                color: #3c5b7f;
                                opacity: 1;
}


/*========= ボタンのためのCSS ===============*/
.openbtn1 {
                                position:fixed;
                                z-index: 9999;/*ボタンを最前面に*/
                                top: 10px;
                                right: 5px;
                                cursor: pointer;
                                width: 50px;
                                height: 50px;
}
  
/*×に変化*/  
.openbtn1 span {
                                display: inline-block;
                                transition: all .4s;
                                position: absolute;
                                left: 14px;
                                height: 2px;
                                border-radius: 2px;
                                background-color: #a17f24;
                                width: 45%;
  }

.openbtn1 span:nth-of-type(1) {
  top:15px; 
}

.openbtn1 span:nth-of-type(2) {
  top:23px;
}

.openbtn1 span:nth-of-type(3) {
  top:31px;
}

.openbtn1.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn1.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn1.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}


p.menu {
                                margin: 0 auto;
                                text-align: center;
                                padding: 48px 0 0;
                                font-size:0;
                                color: #a17f24
}
p.menu:before {font-size: 11px; content: "MENU"}
.openbtn1.active p.menu:before {
                                content: "CLOSE";
}



/*960px以上 ----------------------------------------*/

@media screen and (min-width:960px){

.openbtn1 {
                                display: none
}

#g-nav {
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
	position: relative;
                                top:auto;
                                right: 0;
                                left: 0;
	width: 731px;
	height: 233px;
                                background: none;
	position: relative;
  transition: none;
}
#g-nav ul {
                                position: relative;
                                top:0;
                                right:0;
                                padding: 0;
                                background: none;
                                height: auto;
                                width: auto;
}
#g-nav li a {
                                padding:0;
}


#nav {
	position: relative;
	margin: 0 0 0 247px;
	width: 724px;
	height: 224px;
}

div#indexNav {
	margin: 180px 0 0 237px;
	width: 731px;
	height: 233px;
	z-index: 999;
	position: relative;
	background: url("../template/2016/indexmenubg.png") no-repeat left bottom;
}

#indexNav ul li, #nav ul li {
	position: absolute;
	list-style: none;
}
#indexNav ul li a, #nav ul li a {
	display: block;
}


ul li a.nav_prof, ul li a.nav_essay, ul li a.nav_disco, ul li a.nav_photo, ul li a.nav_info, ul li a.nav_fanclub, ul li a.nav_link, ul li a.nav_home {
	background-position: center top;
                                text-indent: -10000px
}
ul li a:hover.nav_prof, ul li a:hover.nav_essay, ul li a:hover.nav_disco, ul li a:hover.nav_photo, ul li a:hover.nav_info, ul li a:hover.nav_fanclub, ul li a:hover.nav_link {
	background-position: center -122px;
}
ul li a:active.nav_prof, ul li a:active.nav_essay, ul li a:active.nav_disco, ul li a:active.nav_photo, ul li a:active.nav_info, ul li a:active.nav_fanclub,ul li a:active.nav_link {
	background-position: center -240px;
}

/*プロフィール*/
#indexNav ul li#nav_prof {
	top: 105px; left: 79px;
}
#nav ul li#nav_prof {
	top: 43px; left: 0;
}
ul li a.nav_prof {
	width: 100px; height: 100px;
	background: url("../template/2016/menu01_profile.png") no-repeat;
}
/*東奔西走*/
#indexNav ul li#nav_essay {
	top: 101px; left: 172px;
}
#nav ul li#nav_essay {
	top: 98px; left: 55px;
}
ul li a.nav_essay {
	width: 155px; height: 110px;
	background: url("../template/2016/menu02_essay.png") no-repeat;
}
/*ディスコグラフィ*/
#indexNav ul li#nav_disco {
	top: 28px; left: 321px;
}
#nav ul li#nav_disco {
	top: 80px; left: 213px;
}
ul li a.nav_disco {
	width: 118px; height: 110px;
	background: url("../template/2016/menu03_disco.png") no-repeat;
}
/*フォトアルバム*/
#indexNav ul li#nav_photo {
	top: 5px; left: 428px;
}
#nav ul li#nav_photo {
	top: 64px; left: 319px;
}
ul li a.nav_photo {
	width: 85px; height: 100px;
	background: url("../template/2016/menu04_photo.png") no-repeat;
}
/*お知らせ*/
#indexNav ul li#nav_info {
	top: 52px; left: 467px;
}
#nav ul li#nav_info {
	top: 95px; left: 375px;
}
ul li a.nav_info {
	width: 90px; height: 100px;
	background: url("../template/2016/menu05_info.png") no-repeat;
}
/*ファンクラブ*/
#indexNav ul li#nav_fanclub {
	top: 0; left: 546px;
}
#nav ul li#nav_fanclub {
	top: 98px; left: 468px;
}
ul li a.nav_fanclub {
	width: 88px; height: 100px;
	background: url("../template/2016/menu06_fanclub.png") no-repeat;
}
/*リンク*/
#indexNav ul li#nav_link {
	top: 7px; left: 626px;
}
#nav ul li#nav_link {
	top: 126px; left: 546px;
}
ul li a.nav_link {
	width: 105px; height: 100px;
	background: url("../template/2016/menu07_link.png") no-repeat;
}
/*ホーム*/
#nav ul li#nav_home {
	top: 171px; left: 632px;
}
ul li a.nav_home {
	width: 79px; height: 38px;
	background: url("../template/2016/menu08_home.png") no-repeat;
}
ul li a:hover.nav_home {
	background-position: center -44px;
}
ul li a:active.nav_home {
	background-position: center -84px;
}

/*プロフィール*/
#indexNav ul li#nav_prof {
	top: 105px; left: 79px;
}
#nav ul li#nav_prof {
	top: 43px; left: 0;
}
ul li a.nav_prof {
	width: 100px; height: 100px;
	background: url("../template/2016/menu01_profile.png") no-repeat;
}
/*facebook*/
#indexNav ul li#nav_facebook {
	top: 140px; right: 20px;
                                display: absolute;
}
#indexNav ul li#nav_facebook a:hover {
	opacity:0.7;
}
}