/* CSS Document */

.btn-trigger{display: none;}

/* Nav 1001 */
nav{height: 60px;color: #fff;font-family:Josefin,sans-serif;letter-spacing: 0.1em;width:100vw;position: fixed;top:0;left:0;z-index:999;background: #502a0e;}
    nav a{text-decoration: none;color:#fff;}
        nav a:hover{color:#999;transition: 0.3s;}
.nav-inner{display: flex;justify-content: center;padding-top:1em;position: relative;z-index: 999;list-style: none;}
.nav-item{padding:0 2%;border-right: #fff 1px solid;font-size: 22px;font-weight: 700;}
.nav-item:last-child{border-right: none;}
/* Nav 1001 */

.new-item{position: relative;}
.new-item:after{content:'UPDATE';
  display:block;
  color:#fff;
  background-color:red;
  position:absolute;
  bottom:-20px;
  padding:1px 5px;
  font-size:8pt;
  right:50%;
  transform:translate(50%,-50%);
  z-index:50;
  animation: newAnime .3s infinite alternate;}


/* ----------------------------------------------------------------------------------------------------

  ここから767px以下
  
---------------------------------------------------------------------------------------------------- */
@media screen and (max-width:767px) {


/*ナビメニューのスタイルを指定*/
nav#fixedhead{
position: fixed; /*表示位置を固定*/
z-index: 200; /*重ね順を変更*/
top: 0; /*表示位置を指定*/
left: 0; /*表示位置を指定*/
background: #502a0e;
color: #fff;
text-align: center; /*テキストを中央揃え*/
width: 100%; /*全幅表示*/
height: 100%;
transform: translateY(-100%); /*ナビを上に隠す*/
transition: all 0.6s; /*アニメーションの時間を指定*/
    opacity: 0.98;
}

.nav-inner{
    display: flex;
    top: -13.33vw;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: 0 4vw;
    text-align: center;

}

.nav-item{
    font-size: 7.47vw;
border-right: none;
}

.nav-item a{
display: block; /*クリックできる領域を広げる*/
color: #fff;
padding: 1em 0;
text-decoration: none;
}


/*トグルボタンが押されたときに付与するクラス*/
nav#fixedhead.active{
transform: translateY(0%);
}
  
/*=============================
.btn-trigger
=============================*/
.Toggle {
  box-sizing: border-box;
    z-index: 10000;
    position: fixed;
    top: 1.33vw;
    right: 1.33vw;
    width: 10.67vw;
    height: 10.67vw;
    border-color: transparent;
    border-style: solid;
    border-width: 3.07vw 1.73vw;
    background-color: #502a0e;

}
.Toggle span {
  position: absolute;
    right: 0;
    left: 0;
    width: 100%;
    height: 2px;
    margin: auto;
    transform: translateZ(0);
    background-color: #fff;
    transition: .3s;
}
.Toggle, .Toggle span {
  display: inline-block;
  transition: all .3s;
  box-sizing: border-box;
}
.Toggle span:nth-of-type(1) {
  top: 0;
}
.Toggle span:nth-of-type(2) {
  top: 2vw;
}
.Toggle span:nth-of-type(3) {
  bottom: 0;
}
.Toggle.active span:nth-of-type(1) {
  -webkit-transform: translateY(2vw) rotate(45deg);
  transform: translateY(2vw) rotate(45deg);
}
.Toggle.active span:nth-of-type(2) {
  opacity: 0;
}
.Toggle.active span:nth-of-type(3) {
  -webkit-transform: translateY(-2.2vw) rotate(-45deg);
  transform: translateY(-2.2vw) rotate(-45deg);
}

.new-item:after{content:'UPDATE';
  display:block;
  color:#fff;
  background-color:red;
  position:absolute;
  bottom:-10px;
  padding:1px 5px;
  font-size:10pt;
  right:50%;
  transform:translate(50%,-50%);
  z-index:50;
  animation: newAnime .3s infinite alternate;}


}