@charset "UTF-8";
#point_01,#point_02,#point_03,#point_04{
  margin-top: -70px;
  padding-top: 70px;
}
header{
	width: 100%;
	height: 75px;
	position: fixed;
	z-index: 10;
	transition: all .3s;
	display: flex; 
  align-items: center;
  background-color: var(--main-color);
  color: #fff;
  /*background: linear-gradient(to top, transparent,#ffffff);*/

  .logo{
    width: min(70%,210px);
    margin: 0 auto;
    transition: .5s;
  }
}
.menu_head{
  padding-top: 70px;
  height: 140px;
  display: flex; 
  align-items: center;
  
  .logo_en{
    font-size: var(--font-size36);
    color: var(--main-color);
    margin: 0 auto;
  }
}
main{
  /*height: 1000px;
  background-color: red;*/
}

/*---フッターsp---*/
.foot_inner{
  background-color: var(--main-color);
  padding: var(--px70) 0;

  a{
    color: #fff;
  }
  
  .foot_logo{
    width: 90%;
    margin: 0 auto;
    color: #fff;
    text-align: center;
    font-size: var(--font-size18);
    
    img{
      width: min(65%,300px);
      padding-bottom: 10px;
    }
  }
 
  .foot_company{ 
    width: min(90%,340px);
    margin: var(--px50) auto 0;
    color: #fff;
    
    ul{
      padding-bottom: var(--px30);
    }
    
    .company_name{
      font-size: var(--font-size20);
      font-weight: var(--Medium);
    }
    
    a{
      color: #fff;
    }
  }
}
.totop{
  background-color: #fff;
  
  a{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    padding: var(--px10) 0;
    
    &:before{
      position: absolute;
      content: "";
      left: calc((100% - 15px) / 2);
      top: calc((100% - 6px) / 2);
      /*ボーダー矢印*/
      display: inline-block;
      width: 11px;
      height: 11px;
      border-top: 2px solid var(--main-color);
      border-right: 2px solid var(--main-color);
      transform: rotate(-45deg);
      transition: .3s;
    }
  }
}
.copy{
  padding: var(--px20) 5px;
  text-align: center;
  background-color: #001E15;
  color: #fff;
  font-size: var(--font-size14);
}



@media (min-width:768px){
header{
  justify-content: space-between;
  
  .logo{
    margin: 0 0 0 20px;
  }
}
.menu_head{
  padding-top: 70px;
  height: 140px;
  display: flex; 
  align-items: center;
  
  .logo_en{
    font-size: var(--font-size36);
    color: var(--main-color);
    margin: 0 0 0 20px;
  }
  
}
.menu_btn{
      display: flex;
      justify-content: flex-end;
      margin-left: auto;
      padding-right: 20px;
      transition: .1s;

        li{
          padding-left: 30px;
          font-weight: var(--Medium);
          font-size: 1.5rem;
          color: var(--main-color);
          transition: .1s;

          a{
            position: relative;
            transition: .1s;           

            &:before{
              position: absolute;
              content: "";
              left: -15px;
              top: 5px;
              /*ボーダー矢印*/
              display: inline-block;
              width: 8px;
              height: 8px;
              border-top: 1px solid var(--main-color);
              border-right: 1px solid var(--main-color);
              transform: rotate(135deg);
              transition: .1s;
            }
          }
        }
    }
.menu_on{
  .menu_btn{
    position: fixed;
    top: 20px;
    right: 0;
    z-index: 10;

      li{
        color: #fff;

        a{
          color: #fff;
          &:before{
            border-top: 1px solid #fff;
            border-right: 1px solid #fff;
          }
        }
      }
  }
}
/*---フッター tab---*/ 
.foot_inner{
  
  .foot_company{ 
    width: min(96%,700px);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    
    ul{
      width: 50%;
    }
  }
}
  
}


@media (min-width:1024px){
/*--------- pc ---------*/
header{  
  .logo{
    margin: 0 0 0 40px;
    width: 280px;
  }
}
.menu_head{
  .logo_en{
    margin: 0 0 0 40px;
  }  
}
.menu_btn{
    padding-right: 40px;

      li{
        padding-left: 40px;
        font-size: 1.7rem;
        
        a{
          
          &:before{
            left: -18px;
            top: 6px;
            /*ボーダー矢印*/
            width: 10px;
            height: 10px;
            border-top: 2px solid var(--main-color);
            border-right: 2px solid var(--main-color);
          }
        }
      }
  }
.menu_on{
  .menu_btn{

      li{

        a{
          &:before{
            border-top: 2px solid #fff;
            border-right: 2px solid #fff;
          }
        }
      }
  }
}
/*---フッター pc---*/
.foot_inner{
  
  .foot_company{ 
    width: min(90%,1024px);
    
    ul{
      width: auto;
    }
  }
}
  

  
  

  
  
  
  
}


@media (min-width:1280px){
.menu_head{
  .logo_en{
    margin: 0 0 0 80px;
  }
}

  
}


@media (min-width:1480px){
/*--------- 1480 ---------*/
.menu_btn{
    padding-right: 120px;

      li{
        padding-left: 42px;
        font-size: 2.0rem;
        
        a{
          &:before{
            left: -22px;
            top:7px;
            /*ボーダー矢印*/
            width: 12px;
            height: 12px;
          }
        }
      }
  }


}