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

.open_menu{
	display: none;
}
header .contact_btn{
	display: none;
}
header{
	position:fixed;
}
@media screen and (max-width: 1080px) {
	body.mopn{
		height: 100%;
		overflow: hidden;
	}
	.open_menu{
		display: block;
		position: fixed;/*ボタン内側の基点となるためrelativeを指定*/
		top:21px;
		right: 50px;
		background:#1f99ff;
		cursor: pointer;
		width: 60px;
		height:60px;
		border-radius: 60px;
		z-index: 999;
	}

	/*ボタン内側*/
	.open_menu span{
		display: inline-block;
		transition: all .4s;/*アニメーションの設定*/
		position: absolute;
		left: 18px;
		height: 3px;
		border-radius: 2px;
		background: #fff;
	  }


	.open_menu span:nth-of-type(1) {
	  top:21px; 
	  width: 45%;
	}

	.open_menu span:nth-of-type(2) {
	  top:29px;
		width: 35%;
	}

	.open_menu span:nth-of-type(3) {
	  top:37px;
		width: 20%;
	}

	/*activeクラスが付与されると線が回転して×になる*/

	.open_menu.active span:nth-of-type(1) {
		top: 23px;
		left: 21px;
		transform: translateY(6px) rotate(-135deg);
		width: 30%;
	}

	.open_menu.active span:nth-of-type(2) {
	  opacity: 0;
	}

	.open_menu.active span:nth-of-type(3){
		top: 35px;
		left: 21px;
		transform: translateY(-6px) rotate(135deg);
		width: 30%;
	}


	header nav{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		overflow-x:hidden;
		background: #fff;
		text-align: center;
		transition: 0.3s;
		opacity: 0;
		display: none;
		padding-bottom: 80px;
		display: block;
		}
	header nav a{
		display: none;
		}
	header nav.active{
		opacity: 1;
		}
	
	header nav.active li a{
		color: #313131;
		text-align: left;
		display: block;
	}
	
	header nav,
	header nav *{
		pointer-events: none;
		}

		
	header nav.active,
	header nav.active *{
		pointer-events: auto;
		}
		
	header nav #nav_logo{
		display: block;
		margin: 15px 40px;
		padding: 0;
		text-align: left;
	}
	header nav #nav_logo a{
		display: inline-block;
		width: 100%;
	}
	header nav #nav_logo img{
		width: 160px;
		height: auto;
	}
		

	header nav>ul{
		margin-top: 20px;
	}

	header nav>ul>li{
		display: block;
		text-align: left;
		margin-right: 0;
		padding:20px 40px;
		font-size: 18px;
		border-top: 1px solid #313131;
	}
	header nav>ul>li::after{
		display: none;
	}
	li.fs {
    border-left: none;
    border-right: none;
}
	li.fs+ li.fs {
    border-left: none;
    border-right: none;
}
	header nav>ul>li>a {
		display: block;
		padding: 20px 0 10px 0;
	}
	header nav>ul>li>ul{
		transform: none;
		position: relative;
		display: block;
		left: auto;
		top: auto;
		padding: 0;
		transition: 0.3s;
		white-space: nowrap;
		background: none;
		opacity: 1;
		box-shadow: none;
	}
	header nav>ul>li>ul>li a{
		display: block;
		padding:15px;
		font-weight: normal;
	}
	header nav>ul>li>ul>li a::before{
		content: "";
		display: inline-block;
		width: 8px;
		height: 1px;
		background: #313131;
		vertical-align: middle;
		margin-right: 10px;
	}
	header nav>ul>li>ul>li a:hover{
		color: #313131;
	}	
	.hbm{
		display: block;
	}
	header nav>ul>li> a.active:before{
		display: none;
	}}
@media screen and (max-width: 750px) {
	.open_menu{
		right: 20px;
	}
	
	header nav #nav_logo{
		margin: 15px 20px;
	}
	header nav #nav_logo img{
		max-width: 160px;
	}
}
@media screen and (max-width: 550px) {
	.open_menu{
		top:7px;
	}
	    header nav #nav_logo img {
        max-width: 100px;
    }
header nav #nav_logo {
        margin: 15px 20px;
    }

}