/* menu icon */
.openbtn{
	position: relative;
	cursor: pointer;
                                width: 50px;
                                height:50px;
}

/*ボタン内側*/
.openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 2px;
  	width: 45%;
  }

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

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

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

/*activeクラスが付与されると線が回転して×に*/
.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;/*真ん中の線は透過*/
}

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




#header {
                                z-index: 9999;
                                font-size: 12px;
	margin: 0 auto;
	padding: 0;
	display: block;
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	text-align: left;
}
#header nav ul {
	display: none;
	margin: 2em 0 0;
                                height: 768px
}
#header nav ul.active {
	display: block;
	padding: 10vh 0 0;
}
ul#g-navi li {
	text-align: center;
	padding: 0;
}


ul#g-navi li a {
	text-decoration: none;
	display: block;
	padding: 3vh 0;
                                font-size: 18px;
                                letter-spacing: 2px;
}
#header nav a:hover {
	text-decoration: none;
}
ul#menu li.nav_off {
	color: #666;
	padding: 16px 10%;
}

#nav_name {
                                position: absolute;
                                top:5px; left:25%; right: 25%;
                                text-align: center;
                                z-index:1;
                                width: 50%;
}
#nav_name a {
	text-decoration: none;
                                font-size: 25px;
                                z-index:1;
}
#nav_name a img {
                                max-height: 28px;
}


/*980px以上 ----------------------------------------*/

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

/*========= スクロール途中からヘッダーの高さが小さくなるためのCSS ===============*/
#header{
    /*はじめの高さを設定*/
	height: 105px;
                                width: 930px;
   /*以下はレイアウトのためのCSS*/
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	position: absolute;
                                background: none;
	margin: 0 auto;
                                left:0; right:0;
}


#header nav {
                                position: flex;
	background: none;
	text-align: right;
                                width: 930px;
                                height: 105px;
	margin: 0 auto;
                                left:0; right:0;
}


.openbtn {
	display: none;
}
#header nav ul {
                                height: 50px;
                                
}
#header nav ul#g-navi {
	display: block;
	margin: 0 auto;
	padding:  0;
	background: none;
}
ul#g-navi li {
	display: inline-block;
	text-align: right;
                                width: auto;
                                position: relative;
                                margin: 0;
} 
ul#g-navi li a {
	text-decoration: none;
	width:auto;
                                font-size: 15px;
	padding: 35px 15px 0;
	position: relative;
                                letter-spacing: 1px;
}


#nav_name {
                                display: block;
                                left:0; top:25px; right: auto;
                                width: auto;
                                text-align: left;
}
#nav_name a img {
                                width:230px;
                                max-height: 45px;
}
#nav_name a:hover {
                                opacity: 0.7
}
/*HeightMinというクラス名がついたら高さを小さく、上部固定に*/
#header.HeightMin {
	position: fixed;
                                z-index: 999;/*最前面へ*/
	height: 90px;
	animation: DownAnime 0.5s forwards;
                                width: 100%;
                                left:0;right:0
                                
}

@keyframes DownAnime{
  from {
  	opacity: 0;
	transform: translateY(-170px);
  }
  to {
  	opacity: 1;
	transform: translateY(0);
  }
}
#header.HeightMin #nav_name {
                                display: none
}
#header.HeightMin ul#g-navi {
	text-align: center;
} 
#header.HeightMin ul#g-navi li a {
	padding: 20px 15px 0;
}
}




/*========= フッターnav ===============*/
#footer nav {
                                text-align: left;
}
#footer nav ul li {
                                margin: 0.5em 0;
                                line-height: 1em;
                                padding: 0 0 5px;
                                display: inline-block;
                                width: 33%;
}
#footer nav ul li::before {
                                content: "・";
                                padding-right: 5px;
}


#footer nav ul li a {
                                font-size: 4.2vw;
}
#footer nav ul li a:hover {
	text-decoration: none;
}

#footer_name {
                                text-align: center;
                                z-index:1;
                                margin: 0 auto 2rem;
}
#footer_name a {
	text-decoration: none;
                                z-index:1;
}
#footer_name a img {
                                max-height: 20px;
}
@media screen and (min-width:400px){
#footer nav ul li a {
                                font-size: 14px;
                                letter-spacing: 1px;
}
}

@media screen and (min-width:980px){
#footer nav {
                                text-align: center;
}
#footer nav ul li {
                                margin: 0.5em 0;
                                width: auto;
                                padding: 0 20px 5px;
}
#footer nav ul li::before {
                                padding-right: 40px;
}
#footer nav ul li:first-child::before {
                                content: "";
                                padding-right: 0;
}

#footer_name a img {
                                max-height: 30px;
}
}


/*========= ページトップに戻るためのCSS ===============*/
/*リンクの形状*/
#page-top a {
	display: flex;
	justify-content:center;
	align-items:center;
	width: 40px;
	height: 40px;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
	transition:all 0.3s;
                                font-size: 30px;
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 15px;
	bottom: 0;
	z-index: 100;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

@media screen and (min-width:980px){
#page-top {
	right: 35px;
	bottom: 25px;
}
}