@CHARSET "UTF-8";

/*====================================================*/
/* 通常メニュー（スマホの場合の表示） */
/**/
/**/
/*====================================================*/

nav{
	font-size:1.5rem;
	background-color:#000;
	height:auto;
	width:70vw;
	z-index:9998;
	position:fixed;
	top:-100vh;
	right:0;
	transition: all 1s;
}

nav.active{
	top: 0;
	padding-top:60px;
}

nav ul{
	list-style:none;
	margin:0;
	padding:0;
}

nav ul li{	
	font-size:14px;
	border-bottom: 1px solid #fff;
}

nav a{
	display:block;
	padding:10px 0 10px 40px;		
}

nav a:Link      {color: #fff;text-decoration:none;}
nav a:visited   {color: #fff;text-decoration:none;}
nav a:active    {color: #fff;text-decoration:none;}
nav a:hover     {color: #fff;text-decoration:none;}


/*******************************************/
/*  */
/* 通常メニュー (PC用) */
/*  */
/*******************************************/
@media (min-width: 768px) {

	/***********************************/
	nav{
		margin-right:40px;
	}
	
	nav ul{
		display:flex;
		justify-content: space-between;
		list-style:none;
		padding:0;
		margin:0;
	}


    nav{
        background-color:transparent;
        height:auto;
        width:auto;
        z-index:9998;
        position:static;
    }

	nav ul li{	
		border-bottom:none;
		padding:0;
		margin:0;
        font-size:16px;
	}
	
	nav a{
		display:block;
		padding:10px 15px;
		border-radius: 5px;
	}

    nav a:Link      {color: #000;text-decoration:none;}
    nav a:visited   {color: #000;text-decoration:none;}
    nav a:active    {color: #fff;text-decoration:none;background-color:#c8000a;}
    nav a:hover     {color: #fff;text-decoration:none;background-color:#c8000a;}	

}	






/*====================================================*/
/* スマホ用 ハンバーガーメニュー（クラスActive追加で開く） */
/* ハンバーガーメニューの動作だけに作用する */
/**/
/*====================================================*/
.btnMenuHum {
    vertical-align: middle;
    cursor: pointer;
    position: relative;
    width: 34px;
    height: 26px;
    margin:3px;
    z-index: 9999;
    font-size:0;    /*hidden caret browse carsor*/
    display:block;
}

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


/*******************************************/
/*  */
/*  */
/*  */
/*******************************************/
@media (min-width: 768px) {

	.btnMenuHum{
		display:none;
	}

}