/*--------- sp ---------*/
header{
  height: 0;
}
.splogo{
	width: min(90%,250px);
  margin: 4px 0 0 10px;
	transition: all .3s;
	z-index: 1;
	display: inline-block;
}
.tabpclogo{
	display: none;
}
#point_01,#point_02,#point_03,#point_04{
	margin-top: -76px;
	padding-top: 76px;
  outline: none;
}


/*--- contact sp ---*/
.contactus{
  position: relative;
  background-image: url(../images/common/img_01.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
  
  .contactus_cover{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.3);    
  }
  
  .contact_inner{
    width: 84%;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    z-index: 1;
    
    .contact_ti{
      font-size: clamp(3.5rem,4vw,4.0rem);
      position: relative;
    }
    
    .contact_ti:after{
      position: absolute;
      content: '';
      display: inline-block;
      width: 60px;
      bottom: -20px;
      right:  calc((100% - 60px) / 2);
      border-bottom: solid 3px var(--main-color2);
    }
    .contact_btn{
      width: min(100%,240px);
      margin: 100px auto 0;
    }
    
    .btn{
      font-size: 1.6rem;
      width: 100%;
      border-radius: 5px;
      color: var(--font-color);
      background-color: rgba(255, 255, 255, 0.4);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      text-align: center;
      transition: .2s;
    }
    .btn a{
      width: 100%;
      padding: 8px 0;
      display: inline-block;
      color: var(--font-color);
      font-weight: 500;
      transition: .2s;
    }
    
    .btn:hover{
      background-color: rgba(0, 0, 0, 0.3);
      transition: .5s;
    }
    
    .btn:hover a{
      color: #fff;
      opacity: 1;
      transition: .5s;
    }
  }
  





/*--------- フッタ sp ---------*/
footer{
	padding: clamp(50px,9vw,100px) 0 0;
  background-image: url("../images/common/png_01.png");
  background-repeat: no-repeat;
  background-position: 15px bottom;
  background-size: 527px auto;
  
  background-color: rgba(255, 255, 255, 1);
    
  .foot_inner{
    transition: .5s;
	  padding-bottom: clamp(75px,13.5vw,150px);
    
    .foot_info{
      width: min(84%,320px);
      margin: 0 auto;
      transition: .5s;
    }
    .foot_logo{
      width: min(100%,246px);
    }
    .foot_company{
      margin-top: 20px;
      font-weight: 900;
      font-size: 2.0rem;
    }
    .foot_tx{
      margin-top: 14px;
      font-weight: 500;
    }
    .foot_work{
      margin-top: 14px;
      font-weight: 700;
      
      span{
        font-weight: 900;
      }
    }
    .foot_contact{
      margin-top: 14px;

      li{
        width: min(100%,290px);
        font-weight: 500;
        
        span{
          font-weight: 700;
          padding-right: 10px;
        }
      }
    }
    .recruit{
      display: flex;
      justify-content: center;
      padding-top: 40px;

      li{
        margin: 0 10px;
        width: min(100%,240px);
        
         &.btn{
          font-size: 1.6rem;
          width: min(100%,240px);
          border-radius: 5px;
          color: var(--font-color);
          background-color: rgba(0, 0, 0, 0.9);
          backdrop-filter: blur(5px);
          -webkit-backdrop-filter: blur(5px);
          text-align: center;
          transition: .2s;
        }
        &.btn a{
          width: 100%;
          padding: 8px 0;
          display: inline-block;
          color: #fff;
          font-weight: 500;
          transition: .2s;
        }
        &.btn:hover{
          background-color: rgba(0, 0, 0, 0.2);
          transition: .5s;
        }
        &.btn:hover a{
          color: var(--font-color);
          opacity: 1;
          transition: .5s;
        }
      }
    }
  }
  .copy{
    border-top: solid 1px #707070;
    text-align: center;
    margin-top: 17px;
    padding: 17px 0;
    font-weight: 500;
  }  
}	


@media (min-width:768px){
	/*--- contact tab ---*/
  header{
    width: 100%;
		position: fixed;
		z-index: 10;
		display: flex;
		justify-content: flex-start;
    margin-top: 16px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
	.tabpclogo{
    display: block;
    width: 250px;
    margin: 4px 0 0 10px;
    transition: all .3s;
    z-index: 1;
	}
	.pc_nav{
		margin-left: auto;
    padding-right: min(5%,90px);
		display: flex;
		justify-content: space-between;
    align-items: center;
	}
	.pc_nav li{
		padding: 10px 30px 0;
	}
	
/*-----tab ドロップダウンメニュー------*/	
	.primary_nav > li a.no_point{
		cursor: default;
	}
	.primary_nav > li {
		position: relative;
	}
	.primary_nav > li a {
		/*hoverの範囲なので余裕をもって設定*/
		padding-bottom: 46px;
    font-weight: 500;
	}
	.primary_nav > li .secondary_nav {
		position: absolute;
		width: 184px;
		right: calc((100% - 220px) / 2);
		top: 68px;
		display: none;
		z-index: 1;
		padding: 0;
    border: 5px solid rgba(255, 255, 255, 0.0);
    background-color: rgba(255, 255, 255, 0.9);
	}
	.primary_nav > li .secondary_nav li{
		height: auto;
		border: none;
		margin: 0;
		padding: 0;
	}	
	.primary_nav > li .secondary_nav li a {
		display: block;
		height: auto;
		margin: 0;
		color: var(--font-color);
		padding: 9px 10px;
    transition: .3s;
	}
	.primary_nav > li .secondary_nav li a:hover {
		color: var(--main-color);
		opacity: 1;
    transition: .1s;
	}
	/*メニューホバーで変わる設定*/
	.navtitle{
		position: relative;
	}
	.navtitle:hover a{
		color: var(--main-color);
		opacity: 1;
	}
  .navtitle:hover .arrow:after{
		border-bottom: 2px solid var(--main-color);
		border-right: 2px solid var(--main-color);
		transition: .5s;
	}
  .arrow{
		position: relative;
	}
	.arrow:after{
		position: absolute;
		content: "";
		right: -20px;
		top: 6px;
		/*ボーダー矢印*/
		display: inline-block;
		width: 10px;
		height: 10px;
		border-bottom: 2px solid var(--font-color);
		border-right: 2px solid var(--font-color);
		transform: rotate(45deg);
		transition: .3s;
	}
  
	/*--- contact tab ---*/
.contactus{
  animation: bg_slide 40s linear infinite;/*forwards*/
  height: 380px;
}
	
@keyframes bg_slide {
  0% { background-size: 150% auto}
  100% { background-size: 250% auto}
}
	/*--------- フッタ tab ---------*/
  footer{
    background-position: right bottom;
    background-size: 630px auto;
    
    .foot_inner{
      width: min(94%,1740px);
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      
      .foot_info{
        width: min(90%,780px);
        
        .foot_add_wrap{
          display: flex;
          justify-content: space-between;
          
          
        }
      }
     
    }
    .copy{
      width: 94%;
      margin: 34px auto 0;
      padding: 17px 0;
      font-size: 1.8rem;
    }  
  }
  
  

	

	
	
	
}
@media (min-width:1024px){
/*--------- pc ---------*/
	footer{
    background-position: right bottom;
    background-size: 630px auto;
    
    .foot_inner{
      width: min(94%,1740px);
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      
      .foot_info{
        width: min(65%,600px);
        margin: 0;
      }
      .foot_nav{
        width: 25%;
        transition: .4s;
        
        ul{
          width: auto;
          transition: .4s;
          
          li{
            padding-bottom: 5px;
            font-weight: 500;
            transition: .4s;
            
            &:first-child{
              font-size: clamp(2.0rem,2.5vw,2.4rem);
              padding-bottom: 10px;
              font-weight: 700;
            }
          }
        }
	    }
    }
    .copy{
      width: 94%;
      margin: 34px auto 0;
      padding: 17px 0;
      font-size: 1.8rem;
    }  
  }
	
@keyframes bg_slide {
  0% { background-size: 108% auto}
  100% { background-size: 180% auto}
}


	
}



@media (min-width:1280px){
  footer{
    
    .foot_inner{
      justify-content: flex-start;
            
      .foot_nav{
        width: min(45%,650px);
        padding-left: 5%;
        padding-top: .5em;
        display: flex;
        justify-content: space-between;
        
      }


    }
  }
}

@media (min-width:1580px){
  footer{
    
    .foot_inner{
            
      .foot_nav{
        width: min(60%,740px);
        padding-left: 10%;
        
      }


    }
  } 
	
}