@charset "utf-8";







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

/*　以下メニューCSS　*/

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



nav {

	position: fixed;

	top: 0;

	right:0;

	width: 300px;

	height: 100%;

	background-color: #333;

	transition: all 0.1s;

	transform: translate(300px);

	z-index: 1000;

}

nav.open {

	transform: translate(0); 

}

nav ul {

	margin: 0;

	padding: 1em;

	list-style-type: none;

	overflow: auto;

}

nav ul li {

	border-bottom: 1px solid #fff;

	text-align: left;

}

nav ul li a {

	display: block;

	text-decoration: none;

	color: #fff;

	padding: 1em 0;

}

nav ul li.insta{

    display: none;

}



.insta_sp{

    position: absolute;

    right: 70px;

    top: 10px;

    width: 45px;

}



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

    .insta_sp{

        position: fixed;

        right: 10px;

        top: 70px;

        z-index: 10;

    }



}





/* 開閉ボタン */



.navBtn button {

  display: block;

  background:#333;

  border: none;

  padding: 3px 10px;

  width: 48px;

  color: #333;

  letter-spacing: 0.1em;

  cursor: pointer;

  position: fixed;

  top: 10px;

  right:10px;

  z-index: 1001;

  text-align: center;

  outline: none;

}

/* ハンバーガーボタン3本線 */

.navBtn button span.bar {

  display: block;

  height: 3px;

  background-color: #fff;

  margin: 8px 0;

  transition: all 0.1s;

  transform-origin: 0 0;

}

/* メニューアクティブ時 */

.navBtn button.active{

	background-color:#666;

}



.navBtn button.active span.bar {

  width: 36px;

}

.navBtn button.active .bar1 {

  transform: rotate(38deg);

}

.navBtn button.active .bar2 {

  opacity: 0;

}

.navBtn button.active .bar3 {

  transform: rotate(-38deg);

  margin-left:-2px;

}









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

	/* PCでメニュボタン非表示 */

	.navBtn{display:none;}

	

	/*　PCでメニュー常時表示　*/

	nav{

		position: static;

		transform:none;

		width:70%;

		background-color:transparent;

	}

	nav ul{

		width:100%;

        overflow: visible;

        display: flex;

        justify-content: flex-end;

        padding: 0;

        

    }

	nav ul li {

		padding: 0;

		width: auto;

		border-bottom: none;

	}

	nav ul li a{

		color:#000;

        padding: 1em;;

        position: relative;

    }

    nav ul li.stay a:after,

    nav ul li a:hover:after{

        position: absolute;

        left: 20%;

        bottom: 0;

        width: 60%;

        height: 2px;

        background-color: #000;

        content: "";

    }



    nav ul li.toi a{

        width: 200px;

        height: 65px;

        background-color: #000;

        color: #fff;

        border-radius: 35px;

        display: flex;

        justify-content: center;

        align-items: center;

        padding: 0;

        position: relative;

    }

    nav ul li.toi a:after,

    nav ul li.toi a:hover:after{

        position: absolute;

        left: auto;

        bottom: auto;

        right: 10%;

        top: 28%;

        width: auto;

        height: auto;

        background-color: transparent;

        content: "→";

        color: #fff;

    }

    nav ul li.sp{

        display: none;

    }



    .insta_sp{

        display: none;

    }



    nav ul li.insta{

        display: block;

    }

    nav ul li.insta a{

        padding-top: 5px;

        padding-bottom: 5px;

    }

    nav ul li.insta a:hover:after{

        display: none;

    }



    

}



@media (max-width:1150px) and (min-width:911px){

    nav{

        font-size: 1.39vw;

    }

    nav ul li a{

        padding: 0.7em;

    }



    nav ul li.toi a{

        width: 17vw;

        height: 5.6vw;

        border-radius: 3vw;

    }

    nav ul li.insta a{

        width: 6vw;

    }

}