@charset "UTF-8";
/* CSS Document */





/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓　トップメニュー　↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
header img{
	width: 350px;
}
.gnavi{
	list-style: none;
	display: flex;
	justify-content: center;
}

.gnavi li a{
    display: block;
	padding:10px 30px;
    text-decoration: none;
    color: #333;
	transition:all 0.3s;
}


.gnavi li a{
    /*線の基点とするためrelativeを指定*/
  position: relative;
}

.gnavi li.current a,
.gnavi li a:hover{
  color:#fb8c00;
}

.gnavi li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 10%;
    /*線の形状*/
    width: 80%;
    height: 2px;
    background:#fb8c00;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}

.icon_new_tab{
	width: 13px;
	height: 13px;
	fill: #898989;
	stroke-width: 0px;
}
.icon_new_tab_W{
	fill: #fff;
}


/*========= スクロール途中でヘッダーが表示＆非表示するためのCSS ===============*/

#header{
    /*fixedで上部固定*/
	position: fixed;
	height: 70px;
	width:100%;
    z-index: 999;/*最前面へ*/
	/*以下はレイアウトのためのCSS*/
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	padding: 20px;
}

/*　上に上がる動き　*/

#header.UpMove{
	animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime{
  from {
    opacity: 1;
	transform: translateY(0);
  }
  to {
    opacity: 0;
	transform: translateY(-100px);
  }
}

/*　下に下がる動き　*/

#header.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 0;
	transform: translateY(-100px);
  }
  to {
  	opacity: 1;
	transform: translateY(0);
  }
}





/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑　トップメニュー　↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/




/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓　　↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/



/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑　　↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/



@media screen and (max-width:990px){
}





@media screen and (max-width:990px){
.P{display: none!important;}}
@media screen and (min-width:991px){
.S{display: none!important;}}