body {
  position: relative;
  margin: 0;
  padding: 0;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/company/img_01_sp.jpg");
  background-repeat: no-repeat;
  background-size: auto 1080px;
  background-position: center top;
  z-index: -1;
}
header{
	width: 100%;
	height: 70px;
	position: absolute;
	z-index: 10;
	transition: all .3s;
	display: flex; 
  align-items: center;
  background: linear-gradient(to top, transparent,rgba(86,136,217,.7));

  .logo{
    width: min(78%,275px);
    padding-left: 15px;
  }
  .menu_logo{
    display: none;
  }
}
main{
  /*height: 1000px;*/
  /*background-color: red;*/
  
}
/*---------ファーストビュー sp ---------*/
.first_view{
  height: 100vh;
  min-height: 670px;
  color: #fff;
  position: relative;
  
  .first_view_layer{
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 50%;
    }
  }
  .first_view_layer1280{
    display: none;
  }

  .content_title{
    height: 56%;
    width: min(90%,1740px);
    margin: 0 auto;
    line-height: 1.4;
    display: flex;
    flex-flow: column;
    justify-content: center;

    h1{
      font-size: var(--font-size60);
      font-weight: var(--ExtraBold);
      
    }
    h2{
      font-size: var(--font-size20);
      font-weight: var(--Bold);
    }
    .pankuzu{
      padding-top: var(--px30);
      
      li{
        display: inline-block;
        position: relative;
        padding-right: 40px;
        
        &:first-child{
          padding-left: 24px;
          
          &:before{          
            position: absolute;
            display: inline-block;
            content: "";
            background-image: url("../images/common/png_08.png");
            width: 16px;
            height: 16px;
            background-size: 16px;
            bottom: .2em;
            left: 0px;
            transition: all .3S;
            background-repeat: no-repeat;
            background-position: left center;
          }
        }
        
        &:after{
            position: absolute;
            content: "＞";
            right: 9px;
          }
        &:last-child{
          &:after{
            content: "";
          }
        }
        
        a{
          color: #fff;          
        }
      }
    } 
    
  }
  .content_tx{
    height: 44%;
       
    font-size: var(--font-size48);
    font-weight: var(--ExtraBold);
    display: flex;
    justify-content: center;
    flex-flow: column;
    align-items: center;
    padding: 20px 5%;
    position: relative;
  }
}
/*--------- 背景青 ---------*/
.blue{
  background-color: rgba(17,68,153,.9);
}
.light{
  background-color: rgba(17,68,153,.65);
}
.white{
  background-color: rgba(255,255,255,.4);
}
/*---トップに戻るボタンsp---*/
#page-top {
	position: fixed;
	width: 52px;
  height: 52px;
	bottom: 15px;
	right: 15px;
	text-align: center;	
  z-index: 2;
}

/*フッタお問い合わせバナー （トップページだけグラデーション） sp*/
.foot_contact{
  width: min(94%,1340px);
  margin: 0 auto;
  padding: var(--px30) 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .foot_bn{
    width: min(48%,640px);
    transition: .5s;
    margin: 0 auto;
    backdrop-filter: blur(4px);
    background-color: rgba(255,255,255,.8);
    border-radius: var(--px20);
    line-height: 1.2;
    
    a{
      display: block;
      padding: var(--px10) var(--px60) var(--px100);
      border-radius: var(--px20);
      
      &:before{
        position: absolute;
        content: "";
        left: calc((100% - 12px) / 2);
        bottom: 35px;
        /*ボーダー矢印*/
        display: inline-block;
        width: 8px;
        height: 8px;
        border-top: 1px solid var(--font-color);
        border-right: 1px solid var(--font-color);
        transform: rotate(45deg);
      }
      &:after{
        position: absolute;
        content: "";
        left: calc((100% - 30px) / 2);
        bottom: 25px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 1px solid var(--font-color);
        transition: .3s;
      }

      &:hover{
        background-color: rgba(255,255,255,.9);
        opacity: 1;
        transition: .3s;

        &:after{
          background-color: var(--font-color);
          transition: .3s;
        }
        &:before{
          border-top: 1px solid #fff;
          border-right: 1px solid #fff;
          z-index: 1;
          transition: .3s;
        }
      }
    }
    .bn_img{
      width: 40px;
      margin: var(--px60) auto 0;
    }
    .bn_ti_en{
      color: #3BBE5A;
      font-size: 1.7rem;
      font-weight: var(--ExtraBold);
      text-align: center;
      padding-top: var(--px40);
      transition: .5s;
    }
    .bt_ti_jp{
      font-size: var(--font-size18);	
      text-align: center;
      font-weight: var(--Bold);
      position: relative;
      padding-top: 8px;
      
      &:after{/*アンダーライン*/
        /*position: absolute;
        content: '';
        display: inline-block;
        width: 5em;
        bottom: -20px;
        right:  calc((100% - 5em) / 2);
        border-bottom: solid 2px var(--font-color);*/
      }
      
    }
    
    p{
      margin: var(--px40) auto 0;
      font-size: var(--font-size28);
      font-weight: var(--Bold);
      line-height: 1.5;
      width: min(80%,400px);
    }
  }
  .foot_bn2{
    
    .bn_ti_en{
      color: var(--main-color);
    }
  }
}

/*フッタ外部リンクバナー sp*/
.foot_banner{
  padding: var(--px60) 5%;
  background-color: rgba(255,255,255,.9);
  
  ul{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    
    li{
      width: clamp(120px,80%,210px);
      padding: min(1%,5px);
    }
  }
}
/*---フッターsp---*/
.foot_inner{
  background-color: var(--font-color);
  padding: var(--px50) 0 var(--px60);
} 
.foot_nav{ 
  width: 220px;
  margin: 0 auto;
  
  .arrow{
    position: relative;
    display: block;
    width: 210px;
    border-radius: 10px;
    padding: 10px 5px 10px 15px;
    background-color: #444;
    font-weight: var(--Bold);
    margin: 0 clamp(5px,1vw,13px) clamp(5px,1vw,13px) 0;
    color: #fff;

    &:after{
      position: absolute;
      display: inline-block;
      content: "";
      background-image: url("../images/common/png_07.png");
      width: 21px;
      height: 15px;
      background-size: 21px;
      top: 15px;
      right: 15px;
      transition: all .3S;
      background-repeat: no-repeat;
      background-position: left center;
    }
    &:hover{
        &:after{
          right: 7px;
        }
      }
  }
  .nav_home{
    position: relative;
    padding-left: 40px;

    &:before{
      position: absolute;
      display: inline-block;
      content: "";
      background-image: url("../images/common/png_06.png");
      width: 18px;
      height: 18px;
      background-size: 18px;
      top: 10px;
      left: 14px;
      transition: all .3S;
      background-repeat: no-repeat;
      background-position: left center;
    }
  }
  .handling{
    display: block;
    width: 210px;
    font-weight: var(--Regular);
    background-color: #fff;
    border-radius: 50px;
    color: var(--font-color);
    padding: 2px 10px;
    text-align: center;
  }
  .sub_nav{
    display: none;
  }
}
.copy{
  padding: var(--px50) 5px var(--px60);
  text-align: center;
  backdrop-filter: blur(9px);
  background-color: rgba(255,255,255,.6);
  
  ul{
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: min(55%,320px);
    padding-bottom: var(--px50);
    
    li{
      width: min(49%,160px);
      text-align: center;
    }
  }
  
  .foot_logo{
    width: min(90%,500px);
    margin: 0 auto;
  }
  .foot_add{
    padding: var(--px30) 0 var(--px60);
  }
}


/*---ハンバーガーメニューの中身 sp---*/
.hamburger_wrap{
  height: 100vh;
  overflow-y: auto;
  
    /*スクロールバー全体*/
    &::-webkit-scrollbar {
        width: 0px;
    }
}

.hamburger_inner{
  width: min(94%,340px);  
  margin: 0 auto;
  padding: 65px 0;
  text-align: left;
  font-size: 2.0rem;
  font-weight: bold;
  color: #fff;
  
  .arrow{
    position: relative;
    display: block;
    width: min(100%,340px);
    border-radius: 10px;
    padding: 10px 5px 10px 15px;
    background-color: #444;
    font-weight: var(--Bold);
    margin: 0 clamp(5px,1vw,13px) 10px 0;
    color: #fff;

    &:after{
      position: absolute;
      display: inline-block;
      content: "";
      background-image: url("../images/common/png_07.png");
      width: 21px;
      height: 15px;
      background-size: 21px;
      top: 18px;
      right: 15px;
      transition: all .3S;
      background-repeat: no-repeat;
      background-position: left center;
    }
    &:hover{
        &:after{
          right: 7px;
        }
      }
  }
  .nav_home{
    position: relative;
    padding-left: 40px;

    &:before{
      position: absolute;
      display: inline-block;
      content: "";
      background-image: url("../images/common/png_06.png");
      width: 18px;
      height: 18px;
      background-size: 18px;
      top: 17px;
      left: 14px;
      transition: all .3S;
      background-repeat: no-repeat;
      background-position: left center;
    }
  }
  .handling{
    display: block;
    width: min(100%,340px);
    font-weight: var(--Regular);
    font-size: 1.6rem;
    background-color: #fff;
    border-radius: 50px;
    color: var(--font-color);
    padding: 2px 10px;
    text-align: center;
  }
  .sub_nav{
    display: block;
    font-size: 1.6rem;
     font-weight: var(--Regular);
    color: #fff;
    padding: 5px 5px 5px 15px;
    transition: .3s;
    border-bottom: 1px dashed #fff;
    
    &:hover{
      padding-left: 22px;
    }
  }
  li{
    &:last-child{
      .sub_nav{
        margin-bottom: 25px;
      }      
    }
  }

}
@media (min-width:768px){
body::before {
  background-image: url("../images/company/img_01.jpg");
  background-size: cover;
}
header{
  justify-content: space-between;

  .menu_btn{
    display: flex;
    justify-content: flex-start;
    padding-right: 62px;
    
    ul{
      display: flex;
      align-items: center;
      
      li{
        padding-right: 22px;
        font-weight: var(--Bold);
        
        a{
          color: #fff;
        }
      }
    }

    .menu_recruit{
      background-color: #3BBE5A;
      color: #fff;
      width: 164px;
      border-radius: 80px;
      font-weight: var(--Bold);
      text-align: center;
      position: relative;
      margin-right: 10px;

      &:before{
        position: absolute;
        content: '';
        display: inline-block;
        width: 20px;
        height: 14px;
        background-image: url(../images/common/png_01.png);
        top: 13px;
        left: 26px;
        background-size: 20px;
        background-repeat: no-repeat;
        transition: .3s;
      }
      a{
        color: #fff;
        display: block;
        width: 100%;
        padding: 6px 0 6px 20px;
      }
    }

    .menu_contact{
      background-color: var(--main-color);
      color: #fff;
      width: 164px;
      border-radius: 80px;
      font-weight: var(--Bold);
      text-align: center;
      position: relative;
      margin-right: 10px;

      &:before{
        position: absolute;
        content: '';
        display: inline-block;
        width: 20px;
        height: 15px;
        background-image: url(../images/common/png_02.png);
        top: 12px;
        left: 19px;
        background-size: 20px;
        background-repeat: no-repeat;
        transition: .3s;
      }
      a{
        color: #fff;
        display: block;
        width: 100%;
        padding: 6px 0 6px 20px;
      }
    }
    
  }
}
/*---------ファーストビュー tab ---------*/
.first_view{
  height: 100vh;
  min-height: 670px;
  
  .content_tx{
    text-align: center;
  }
}
/*フッタお問い合わせバナー tab*/
.foot_contact{
  width: min(90%,1340px);

  .foot_bn{
    
    a{
      height: 100%;
      padding: var(--px50) var(--px60) var(--px140);
      
      &:before{
        left: calc((100% - 16px) / 2);
        bottom: 73px;
        /*ボーダー矢印*/
        width: 11px;
        height: 11px;
      }
      &:after{
        left: calc((100% - 40px) / 2);
        bottom: 60px;
        width: 40px;
        height: 40px;
      }
    }
    .bn_ti_en{
      font-size: var(--font-size60);
    }

    .bt_ti_jp{
      
      &:after{/*アンダーライン*/
        /*bottom: -30px;*/
      }      
    }    
  }
}
  
/*フッタ外部リンクバナー tab*/
.foot_banner{
  
  ul{
    
    li{
      width: clamp(220px,33%,400px);
      padding: min(2%,10px);
    }
  }
}
/*---フッター tab---*/ 
.foot_inner{
  padding-bottom: 30px;
}
.foot_nav{
  width: 720px;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  
  .arrow{
    width: 225px;
  }
  .handling{
    width: 225px;
  }
  
  .sub_nav{
    display: block;
    color: #fff;
    padding: 5px 5px 5px 15px; 
    transition: .3s;
    
    &:hover{
      padding-left: 22px;
    }
  }
  li{
    &:last-child{
      margin-bottom: 30px;
    }
  }
}
  
  
  
/*---ハンバーガーメニューの中身 tab---*/
.hamburger_inner{
  width: min(100%,750px);
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  
  .arrow{
    width: 220px;
    margin-right: 24px;
  }
  .handling{
    width: 220px;
    margin-right: 24px;
  }
  .sub_nav{
    margin-right: 24px;
  } 
  li{
    &:last-child{
      .sub_nav{
        margin-bottom: 35px;
      }      
    }
  }

}  
  
  
}


@media (min-width:1024px){
/*--------- pc ---------*/
header{
  .menu_btn{
    padding-right: 15px;
  }
}
 /*---トップに戻るボタンpc---*/
  #page-top {
    bottom: 30px;
    right: 30px;
  }
  
/*フッタお問い合わせバナー pc*/
.foot_contact{

  .foot_bn{
    
    a{
      
      &:before{
        left: calc((100% - 22px) / 2);
        bottom: 91px;
        /*ボーダー矢印*/
        width: 15px;
        height: 15px;
        border-top: 2px solid var(--font-color);
        border-right: 2px solid var(--font-color);
      }
      &:after{
        left: calc((100% - 60px) / 2);
        bottom: 70px;
        width: 60px;
        height: 60px;
        border: 2px solid var(--font-color);
      }
      &:hover{
        &:before{
          border-top: 2px solid #fff;
          border-right: 2px solid #fff;
        }
      }
    }


    .bt_ti_jp{
      
      &:after{/*アンダーライン*/
        /*bottom: -35px;*/
      }
      
    }
    
  }

}
/*---フッター pc---*/ 
.foot_nav{
  width: 990px;
  
  .arrow{
    width: 235px;
    &:after{
      top: 17px;
    }
  }
  .nav_home{
    &:before{
      top: 12px;
    }
  }
  .handling{
    width: 235px;
  }
}

  
  
  

  
  
  
  
}
@media (min-width:1180px){
header{
  .menu_btn{
    .menu_logo{
      display: block;
      width: 125px;
    }
  }
}  
/*---フッター 1180---*/ 
.foot_nav{
  width: 1130px;
  
  .arrow{
    width: 210px;
  }
  .handling{
    width: 210px;
  }
}
  
  
  
}

@media (min-width:1280px){
header{
  height: 80px;

  .logo{
    width: min(26%,395px);
    padding-left: 40px;
  } 
  .menu_btn{
    padding-right: 30px;
    
    .menu_recruit{
      width: 180px;

      &:before{
        width: 30px;
        height: 27px;
        top: 13px;
        left: 25px;
        background-size: 30px;
      }
      a{
        padding: 9px 0 9px 30px;
      }
    }

    .menu_contact{
      width: 180px;
      margin-right: 20px;

      &:before{
        width: 30px;
        height: 26px;
        top: 11px;
        left: 19px;
        background-size: 30px;
      }
      a{
        padding: 9px 0 9px 33px;
      }
    }
    .menu_logo{
      width: 140px;
    }
  }
}
/*---------ファーストビュー 1280 ---------*/
.first_view{
  .first_view_layer{
    display: none;
  }
  .first_view_layer1280{
    display: block;
    position: absolute;
    width: 100%;
    height: auto;
    bottom: -2vw;
    left: 0;
  }
}  
 
  
  
  
  
  
}


@media (min-width:1480px){
header{
  height: 100px;
  
  .menu_btn{
    padding-right: 50px;
    
    .menu_recruit{
      width: 220px;

      &:before{
        width: 40px;
        height: 27px;
        top: 17px;
        left: 42px;
        background-size: 40px;
      }
      a{
        padding: 17px 0 9px 40px;
      }
    }

    .menu_contact{
      width: 220px;
      margin-right: 20px;

      &:before{
        width: 40px;
        height: 30px;
        top: 14px;
        left: 28px;
        background-size: 40px;
      }
      a{
        padding: 17px 0 9px 42px;
      }
    }
    .menu_logo{
      width: 188px;
    }
  }
}
/*---------ファーストビュー 1480 ---------*/
.first_view{
  .first_view_layer1280{
    display: block;
    position: absolute;
    width: 1480px;
    height: auto;
    bottom: -2.8vw;
    left: calc((100% - 1480px) / 2);
  }
} 
  


}