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

header{
  padding: 15px 0;
  position: relative;
}

header h1{
  width: 220px;
  position: absolute;
  top: 25px;
  left: 30px;
}

header nav{
  width: 100%;
  min-width: 1300px;
  height: 60px;
  background: #FFF;
}

header nav ul{
  display: flex;
  justify-content: flex-start;
  float: right;
}

header nav ul li:first-of-type{
  display: none;
}

header nav ul li a{
  font-size: 17px;
  line-height: 60px;
  padding: 0 20px;
  display: block;
  position: relative;
}

header nav ul li:last-of-type a{
  color: #FFF;
  background: #242230;
}

@media screen and (min-width: 768px) {
  
  header nav ul li a.active::before{
    content: "";
    width: 55px;
    height: 2px;
    background: #4d5d9f;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  header nav ul li:nth-last-child(4) a span{
    padding-right: 24px;
    position: relative;
  }

  header nav ul li:nth-last-child(4) a span::after{
    content: "";
    width: 17px;
    height: 17px;
    background: url("../common/icon_link.webp") left center no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-40%);
  }

  header nav ul li:last-of-type{
    margin-left: 15px;
  }

  header nav ul li:last-of-type a:hover{
    background: #3c3c82;
    opacity: 1;
  }
  
  header nav ul li:last-of-type a span{
    padding-left: 35px;
    position: relative;
  }

  header nav ul li:last-of-type a span::before{
    content: "";
    width: 21px;
    height: 16px;
    background: url("../common/icon_mail.webp") left center no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-40%);
  }

  .fx_nav{
    width: 100%;
    height: 70px;
    background: #FFF;
    position: fixed;
    top: -70px;
    left: 0;
    z-index: 9999;
    transition: .3s;
  }
  
  .fx_nav.sdw{
    top: 0;
    transition: .6s;
  }
      
  .fx_nav nav{
    width: 100%;
    min-width: 1300px;
    height: 70px;
    background: #FFF;
  }
  
  .fx_nav nav ul{
    display: flex;
    justify-content: flex-start;
    float: right;
  }

  .fx_nav nav ul li:first-of-type{
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .fx_nav nav img{
    width: auto;
    height: 70px;
  }

  .fx_nav nav ul li a{
    font-size: 17px;
    line-height: 70px;
    padding: 0 25px;
    display: block;
  }

  .fx_nav nav ul li:nth-last-child(4) a span {
    padding-right: 28px;
    position: relative;
  }

  .fx_nav nav ul li:nth-last-child(4) a span::after{
    content: "";
    width: 19px;
    height: 19px;
    background: url("../common/icon_link.webp") left center no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-40%);
  }

  .fx_nav nav ul li:last-of-type a{
    margin-left: 15px;
    color: #FFF;
    background: #242230;
  }

  .fx_nav nav ul li:last-of-type a:hover{
    background: #3c3c82;
    opacity: 1;
  }

  .fx_nav nav ul li:last-of-type a span{
    padding-left: 35px;
    position: relative;
  }

  .fx_nav nav ul li:last-of-type a span::before{
    content: "";
    width: 21px;
    height: 16px;
    background: url("../common/icon_mail.webp") left center no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-40%);
  }
}


@media screen and (max-width: 767px) {
  
  .fx_nav{
    display: none;
  }
  
  header{
    width: 100%;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    background: rgba(36,34,48,0);
    transition: .6s;
  }
  
  header.floating{
    background: rgba(36,34,48,1);
    transition: .6s;
  }

  header h1{
    width: 30vw;
    height: auto;
    margin: 4vw;
    position: relative;
    top: auto;
    left: auto;
  }
  
  header h1::before{
    content: "";
    width: 100%;
    height: 100%;
    background: url("../common/logo_w.webp") no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1;
  }
  
  header h1 img{
    opacity: 1;
    transition: .6s;
  }
  
  header.floating h1 img{
    opacity: 0;
    transition: .6s;
  }
  
  header.floating h1::before{
    opacity: 1;
    transition: .6s;
  }

  header nav{
    width: 100%;
    min-width: 100%;
    height: 100vh;
    background: #242230;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: none;
    overflow: auto;
  }

  header nav ul{
    display: block;
    float: none;
    padding-top: 20vw;
  }

  header nav ul li:first-of-type{
    position: static;
    top: auto;
    left: auto;
    display: block;
  }

  header nav ul li a{
    font-size: 3.8vw;
    color: #FFF;
    line-height: 1;
    padding: 5vw 23vw;
    display: block;
  }
  
  header nav img{
    width: auto;
    height: 9vw;
  }

  header nav ul li:nth-last-child(4) a span{
    width: 100%;
    display: inline-block;
    position: relative;
  }

  header nav li:nth-last-child(4) a span::after{
    content: "";
    width: 3.5vw;
    height: 3.5vw;
    background: url("../common/icon_link_p.webp") no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 60%;
    left: 20vw;
    transform: translateY(-50%);
  }

  header nav ul li:last-of-type a{
    color: #242230;
    background: none;
    margin-top: 3vw;
  }
  
  header nav ul li:last-of-type a span{
    width: 100%;
    background: #FFF;
    display: inline-block;
    padding: 5vw 0 5vw 16vw;
    position: relative;
  }
  
  header nav ul li:last-of-type a span::before{
    content: "";
    width: 4vw;
    height: 3.3vw;
    background: url("../common/icon_mail_p.webp") no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 52%;
    left: 9vw;
    transform: translateY(-50%)
  }
  
  .btn_m{
    margin: 1.8vw;
		width: 18vw;
		height: auto;
		position:fixed;
		top:0;
		right:0;
		z-index:9999;
		opacity:1;
		cursor: pointer;
    display: block;
	}
  		
	.menu {
		width: 18vw;
		height: 13vw;
		display: block;
		z-index: 99999;
		cursor: pointer;
	}
			
	.menu span {
		width: 7vw;
		height: 1px;
		display: block;
		background: #242230;
		position: absolute;
		right: 6vw;
		top: 50%;
		cursor: pointer;
    transition: all 0.3s;
    transform: rotate(0deg);
	}
  
  header.floating .menu span{
    background: #FFF;
  }
	
	.menu span:not(:target) {
		display: block;
	}
	
	.menu .top {
    transform: translateY(-1vw);
	}
	
	.menu .bottom {
    transform: translateY(1vw);
	}
			
	.menu.is-open .top {
    transform: rotate(-35deg) translateY(0px);
    background: #FFF;
	}
	
	.menu.is-open .bottom {
    transform: rotate(35deg) translateY(0px);
    background: #FFF;
	}
  
  .menu p{
    font-size: 3vw;
    line-height: 0;
    color: #242230;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-75%,-50%);
    transition: all 0.3s;
  }
  
  header.floating .menu p{
    color: #FFF;
  }
  
  .menu.is-open p{
    opacity: 0;
  } 
}