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


#menu-btn-check {
  display: none;/*必ずプロパティをnone*/
	}


/**/
@media screen and (min-width: 350px){


	.menu-content ul li{
		font-weight: normal;
		letter-spacing: 1.0px;
		line-height: 1.3;
	}
	.menu-content ul li .fas{
		margin-left:16px;
	}

	.menu-btn {
	    position: fixed;
	    top: 10px;
	    right: 10px;
	    display: flex;
	    height: 50px;
	    width: 50px;
	    justify-content: center;
	    align-items: center;
	    z-index: 90;
	    background:rgba(0,0,0,0.5);
	}
	.menu-btn span,
	.menu-btn span:before,
	.menu-btn span:after {
	    content: '';
	    display: block;
	    height: 3px;
	    width: 25px;
	    border-radius: 3px;
	    background-color: #ffffff;
	    position: absolute;
	}
	.menu-btn span:before {bottom: 8px;}
	.menu-btn span:after {top: 8px;}
	/*✖表示*/
	.menu-btn {
     background:rgba(0,0,0,0.9);
     transition: all 0.2s;/*アニメーション設定*/
	}
		
	#menu-btn-check:checked ~ .menu-btn span {
	    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
	}
	#menu-btn-check:checked ~ .menu-btn span::before {
	    bottom: 0;
	    transform: rotate(45deg);
	}
	#menu-btn-check:checked ~ .menu-btn span::after {
	    top: 0;
	    transform: rotate(-45deg);
	}

	#menu-btn-check:checked ~ .menu-btn{
	    transform: rotate(270deg);
	    transition: all 0.8s;/*アニメーション設定*/
	    border-radius: 50%;
	}

	/**/
	.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    background:rgba(0,0,0,0.9);
	}
	.menu-content ul {
		padding: 20px 40px;}
	.menu-content ul li { list-style: none; margin-bottom: 25px;}
	.menu-content ul li a {
	    display:inline;
	    width: 100%;
	    font-size: 14px;
	    box-sizing: border-box;
	    color:#fff;
	    text-decoration: none;
	    padding: 15px 15px 15px 0;
	    position: relative;
	}
	.menu-content ul li a::before {
	    content: "";
	    width: 7px;
	    height: 7px;
	    position: absolute;
	    right: 11px;
	    top: 16px;
	}

	/**/	
	.menu-content {
	    width: 100%;
	    height: 100%;
	    position: fixed;
	    top: 100%;/*leftの値を変更してメニューを画面外へ*/
	    z-index: 80;
	    background:rgba(0,0,0,0.8);
	    transition: all 0.5s;/*アニメーション設定*/
	}

	/**/
	#menu-btn-check:checked ~ .menu-content {top: 50%;/*メニュー 画面内表示の高さ*/}
}


/**/
@media screen and (min-width: 480px){

}

/**/
@media screen and (min-width:740px){
	.menu-content ul li{
	font-weight: normal;
	letter-spacing: 1.0px;
	}
	.menu-content ul li .fas{
		margin-left:16px;
	}

	.menu-btn {
	    position: fixed;
	    top: 10px;
	    right: 10px;
	    display: flex;
	    height: 50px;
	    width: 50px;
	    justify-content: center;
	    align-items: center;
	    z-index: 90;
	    background:rgba(0,0,0,0.5);
	}
	.menu-btn span,
	.menu-btn span:before,
	.menu-btn span:after {
	    content: '';
	    display: block;
	    height: 3px;
	    width: 25px;
	    border-radius: 3px;
	    background-color: #ffffff;
	    position: absolute;
	}
	.menu-btn span:before {bottom: 8px;}
	.menu-btn span:after {top: 8px;}
	/*✖表示*/
	.menu-btn {
     background:rgba(0,0,0,0.9);
     transition: all 0.2s;/*アニメーション設定*/
	}
		
	#menu-btn-check:checked ~ .menu-btn span {
	    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
	}
	#menu-btn-check:checked ~ .menu-btn span::before {
	    bottom: 0;
	    transform: rotate(45deg);
	}
	#menu-btn-check:checked ~ .menu-btn span::after {
	    top: 0;
	    transform: rotate(-45deg);
	}

	#menu-btn-check:checked ~ .menu-btn{
	    transform: rotate(270deg);
	    transition: all 0.8s;/*アニメーション設定*/
	    border-radius: 50%;
	}

	/**/
	.menu-content {
    	width: 100%;
    	height: 100%;
    	position: fixed;
    	top: 0;
    	left: 0;
    	z-index: 80;
    	background:rgba(0,0,0,0.9);
	}

	.menu-content ul {padding: 10px 20px; display: flex; font-size: 10px;}
	.menu-content ul li { list-style: none;}　
	.menu-content ul li a{
	    display:inline;
	    width: 100%;
	    font-size: 10px;
	    box-sizing: border-box;
	    color:#fff;
	    text-decoration: none;
	    padding: 10px 10px 10px 0;
	    position: relative;
	}
	.menu-content ul li a::before {
	    content: "";
	    width: 7px;
	    height: 7px;
	    position: absolute;
	    right: 11px;
	    top: 16px;
	}

	/**/	
	.menu-content {
	    width: 100%;
	    height: 100%;
	    position: fixed;
	    top: 100%;/*leftの値を変更してメニューを画面外へ*/
	    z-index: 80;
	    background:rgba(0,0,0,0.8);
	    transition: all 0.5s;/*アニメーション設定*/
	}

	/**/
	#menu-btn-check:checked ~ .menu-content {top: 75%;/*メニュー 画面内表示の高さ*/}
}


/**/
@media screen and (min-width:1024px){
	header{

	}
	.menu-content {
    width:100%;
    height: 80px;
    position: fixed;
    z-index: 1;
    background:rgba(0,0,0,0.7);
    top:0;
    left: 0;

	}

	.menu-btn span{display: none;}

	/*✖表示*/
	.menu-btn {display: none;}
	#menu-btn-check:checked ~ .menu-btn span {display: none;}
	#menu-btn-check:checked ~ .menu-btn {display: none;}

	/**/
	.menu-content{ margin: 0 auto; width: 100%;}
	.menu-content ul {padding: 15px 40px 0; display: flex; justify-content: center; align-items: center;}
	.menu-content ul li { list-style: none; margin-left: 2em;}
	.menu-content ul li a {
	    width: 100%;
	    font-size: 14px;
	    box-sizing: border-box;
	    color:#fff;
	    text-decoration: none;
	    padding: 15px 15px 15px 0;
	}

	.menu-content ul li .tri{
		margin-left:10px;
		transform: rotate(90deg);
	}
	.menu-content ul li .fas_top{
		margin-left:10px;
		transform: rotate(-90deg);
	}

}