@charset "utf-8";







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

/*　以下メニューCSS　*/

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



nav {

	position: fixed;

	top: 0;

	right:0;

	width: 300px;

	height: 100%;

	background-color: #000;

	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;

}



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



        nav ul li.ico a{

            height: 55px;

        }

        nav ul li.ico img{

            display: none;

        }

        nav ul li.ico.inst a{

            background: url(../img/ico_insta_w.png) 30px center no-repeat;

            background-size: auto 30px;

        }

        nav ul li.ico.fb a{

            background: url(../img/ico_fb_w.png) 30px center no-repeat;

            background-size: auto 30px;

        }





        /* サブメニュー */

        nav ul ul{

            padding: 0;

            margin-left: 1em;

        }

        nav ul ul li:first-child {

            border-top: 1px solid #fff;

        }

        nav ul ul li:last-child {

            border-bottom: none;

        }



        nav ul ul li a:before {

            content: "-";

            padding-right: 0.5em;

        }

    }





/* 開閉ボタン */



.navBtn button {

  display: block;

  background:#333;

  border: none;

  padding: 3px 10px;

  width: 48px;

  color: #333;

  letter-spacing: 0.1em;

  cursor: pointer;

  position: fixed;

  top: 15px;

  right:20px;

  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:901px){

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

	.navBtn{display:none;}

	

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

	nav{

		position: static;

		transform:none;

        width: auto;

		background-color:transparent;

        font-family:"Hiragino Mincho ProN", "Times New Roman", "YuMincho",  "Yu Mincho", "MS PMincho", serif;

        font-size: 17px;

	}

	nav ul{

        padding: 0;

        margin:0;

		width:100%;

		margin:auto;

        overflow: visible;

        display: flex;

        justify-content: flex-end;

        align-items: center;

	}

	nav ul li {

		padding: 0;

        margin-left: 1em;

		width: auto;

		border-bottom: none;

		text-align:center;

        position: relative;

	}

    nav ul li img{

        vertical-align: middle;

    }

    nav ul li a{

        color:#000;

        padding: 15px 1em;

        position: relative;

        background-position: center bottom;

        background-repeat: no-repeat;

    }

    nav ul li.stay a,

    nav ul li:nth-child(-n+3) a:hover{

        background-image: url(../img/nav-dotto.png);

        background-position: center bottom;

        background-repeat: no-repeat;

    }

    nav ul li.toi a{

        width: 240px;

        height: 64px;

        padding: 0;

        background-color: #000;

        color: #fff;

        display: flex;

        justify-content: center;

        align-items: center

	}

    nav ul li.ico a{

        padding: 0;

    }





    /*　ドロップダウンメニュー　*/

    nav ul li ul{

        list-style: none;

        position: absolute;

        z-index: 9999;

        top: 100%;

        left: 0;

        margin: 0;

        padding: 0;

    }

    nav ul li ul li{

        width: 100%;

        border-right:none;

    }

    nav ul li ul li a{

        padding: 13px 15px;

        border-top: 1px solid #999;

        background-color: #ddd;

    }

    /* 広がるように 表示 */

    nav ul li ul li{

        overflow: hidden;

        height: 0;

        transition: .2s;

    }

    nav ul li:hover ul li{

        overflow: visible;

        height: 55px;

    }



    



}



@media (max-width:1100px) and (min-width:901px){

    nav ul li.toi a{

        width: 180px;

    }



    

}