/*========================
nav
=========================*/

  .nav_area{
    background-color   : #000;
  background-image:
radial-gradient(#444 6%, transparent 9%);
    background-size    : 12px 12px;
    width: 100%;
    position:fixed;
  left: 0; top: 0;
height: 100vh;
  z-index: -1;
  transition: all 0.3s;
  display: none;
  }

.nav_area.active{
  display: block;
  z-index:999;
}

.navbox{width: 940px; position: absolute;
  z-index: 999;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%); display: flex; justify-content: space-between; flex-wrap: wrap;}

.navbox .nav_inner_box{width: 430px;}
.navbox .nav_inner_box h2{font-size: 58px; color: #fff; font-weight: bold; line-height: 1.8; border-bottom: 1px solid #ea3223; font-style: italic; margin-bottom: 20px; font-family: 'Roboto', sans-serif;}
.navbox .nav_inner_box h2.entry_h2{color: #ea3223;}
.navbox .nav_inner_box h2 span{color: #ea3223; font-size: 18px; margin-left: 15px; font-style: normal;}
.navbox .nav_inner_box ul{display: flex; flex-wrap: wrap; gap: 20px 0px; margin-bottom: 80px;}
.navbox .nav_inner_box ul li{width: 100%;}
.navbox .nav_inner_box ul li a{font-size: 18px; font-weight: bold; color: #fff; line-height: 1.8;}
.navbox .nav_inner_box ul li.entry_link a{color: #ea3223;}

.nav_area .snsarea{width: 35px; height: 260px; display: flex; position: absolute; top:0; bottom: 0; margin: auto; right: 40px; flex-wrap: wrap; gap: 20px 0px;}
.nav_area .snsarea li{width: 35px;}

.nav_link_img{width: 85px; height: 215px; display: flex; position: absolute; top: 0; bottom: 0; margin: auto; left: 40px; flex-wrap: wrap; gap:  20px 0px;}
.nav_link_img li{width: 85px;}

@media screen and (max-width:1240px) {
  .navbox{width: 95%;}
  .navbox .nav_inner_box{width: 48%;}
  .navbox .nav_inner_box h2{font-size: 48px; }
  .nav_area .snsarea{width: 200px; height: 85px; top:auto; bottom: 0; margin: auto; right: 0; left: 0; gap: 0px 20px; align-items: center;}
  .nav_link_img{width: 215px; height: 85px; top: auto; bottom: 100px; left: 0; right: 0; gap:  0px 20px; align-items: center;}
}

@media screen and (max-width:767px){
  .navbox .nav_inner_box{width: 100%;}
  .navbox .nav_inner_box h2{font-size: 38px; margin-bottom: 10px; line-height: 1.2; }
.navbox .nav_inner_box h2 span{font-size: 16px; margin-left: 10px;}
.navbox .nav_inner_box ul{gap: 10px 0px; margin-bottom: 30px;}
.navbox .nav_inner_box ul.last{ margin-bottom:0;}
.navbox .nav_inner_box ul li{width: auto; margin-right:30px;}
.navbox .nav_inner_box ul li a{font-size: 13px; }
.nav_area{
  overflow-y: scroll;
  padding: 0 0 100px;
}
/*.navbox{position: relative; margin-bottom: 30px;}*/
.navbox{position: static;
    margin-bottom: 30px;
    transform: none;
    padding: 105px 0 0;
    margin: 0 auto;}
.nav_area .snsarea{position: static;}
.nav_link_img{ position: static; gap: 0px; justify-content: space-between; width: 40%;}
.nav_link_img li{width: 45%;}
.nav_link_img li img{width: 100%; height: auto;}
}


@media screen and (max-height:850px) and (min-width:768px) {
	.nav_area{ overflow-y: scroll;}
	.navbox{
	    position: relative;
	    top: 100px;
	    left: auto;
	    transform: inherit;
	    margin: 0 auto;
		
	}
	}
	
@media screen and (max-height:850px) and (max-width:1240px){
	.nav_area .snsarea{ position: relative; top:auto; bottom: auto; margin: 20px auto; right: 0; left: 0; gap: 0px 20px; align-items: center;}
	.nav_link_img{ position: relative; top: auto; bottom: auto; margin: 0 auto;}
}