/* header */
#headerbox {
    transform: translateZ(0);
    top: -100px;
    position: absolute;
    width: 100%;
    margin: 100px auto 0;
    line-height: 0;
    z-index: 999;

background-position: 0 100%;
  background: url(headerback.png) repeat-x left bottom;
  padding-bottom: 1px;                  /* 追加 */
  background-origin: padding-box;       /* 追加：背景の開始を padding に */
  background-clip: padding-box;         /* 追加：描画も padding 内に限定 */
}
#headerbox .inner {
    max-width: 930px;
	height:110px;
    padding: 7px 0 0;
    margin: 0 auto;
    position: relative;
}
#headerbox .inner:after {
    content: "";
    clear: both;
    display: block;
}
 
#headerbox h1 a{
    display: block;  
    max-width: 426px;  
	height:73px;
	background:url(headerlogo.gif) no-repeat;
	overflow: hidden;text-indent: -500em;white-space: nowrap;
}
#navmenu ul {
	background:url(menuback.png) no-repeat;
    list-style: none;
    position: absolute;
    right: 0;
    top: 7px;
	width:279px;
	height:76px;
    font-size: 14px;
}
#navmenu ul li {
    float: left;
}
#navmenu ul li a {
	display:block;
	position:absolute;
}
#navmenu ul a.gallery {
	background:url(menu_ga.gif);
	width:88px;height:25px;
	top:15px; left:40px;
	overflow: hidden;	text-indent: 100%;  	white-space: nowrap;
}
#navmenu ul a.about {
	background:url(menu_ab.gif);
	width:78px;height:25px;
	top:15px; left:152px; 
	overflow: hidden;	text-indent: 100%;  	white-space: nowrap;
}
/*
#navmenu ul a.gallery:hover {
	background:url(menu_ga_hover.gif);
}
#navmenu ul a.about:hover {
	background:url(menu_ab_hover.gif);
}
*/
#navmenu ul li span {
	background:#202253;
	position:absolute;
    width: 1px;
    height: 14px;
	top:15px;
	left:140px;
    z-index: 101;
}
 
/* Fixed */
#headerbox.fixed {
    margin-top: 0;
    top: 0;
	opacity:0.8;
    position: fixed;
    transition: top 0.65s ease-in;
    -webkit-transition: top 0.35s ease-in;
    -moz-transition: top 0.35s ease-in;
}
#headerbox.fixed .logo {
    font-size: 24px;
    color: #333;
}
#headerbox.fixed #navmenu ul li a {
    color: #333;
}
 
/* Toggle Button */
#nav-toggle {
    display: none;
    position: absolute;
    right: 12px;
    top: 14px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}
#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #FFF;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
    top: 0;
}
#nav-toggle span:nth-child(2) {
    top: 11px;
}
#nav-toggle span:nth-child(3) {
    top: 22px;
}



@media screen and (max-width: 640px) {
    #headerbox,
    #headerbox .inner {
        width: 100%;
		height:56px;
        padding: 0;
    }
    #headerbox {
        top: 0;
        margin-top: 0;
    }
    /* Fixed reset */
    #headerbox.fixed {
    }
    #logobox {
		background-color:#202253;
        width: 100%;
        height: 56px;
        z-index: 999;
        position: relative;
    }
    #headerbox .logo a{
	background:url(headerlogomobile.gif) no-repeat left top;
        position: absolute;
		width:280px;
		height:27px;
        left: 13px;
        top: 13px;
        color: #333;
        font-size: 26px;
    }
    /* 開いてないときのnavmenu 1.画面外に配置（-500px）2.アニメーションを設定（transition:easeinout） */
    #navmenu {
		z-index:999;
        position: absolute;
        top: -500px;
		right:0px;
		width:100%;
        text-align: center;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
    }
    #navmenu ul {
		width:100%;
		height:55px;
        background:#202253;
		opacity: 0.9;
        list-style: none;
        font-size: 14px;
    }
    #navmenu ul li {
		display:block;
        float: none;
        position: relative;
    }

#navmenu ul a.gallery {
	position:relative;
	margin:0 auto;
	top:0;right:0;left:0;bottom:0;
}
#navmenu ul a.about {
	position:relative;
	margin:0 auto;
	top:0;right:0;left:0;bottom:0;
}
#navmenu ul li span {
	width:0;height:0;
	position:relative;
	}

    #nav-toggle {
        display: block;
    }
    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }
    /* #navmenu スライドアニメーション */
    .open #navmenu {
        /* #navmenu top + #logobox height */
        -moz-transform: translateY(549px);
        -webkit-transform: translateY(549px);
        transform: translateY(549px);
    }
}