@charset "utf-8";

li{
    margin: 20px;
}
a{
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-weight: 300;
    font-size: 20px;
    text-align: center;
}
.header-wrapper{
    display: flex;
}
#navi{
    position: fixed; 
    top: 20px;
    right: 10px;
    z-index: 200;
    transform: translateX(700px);
    transition: 1s;
    text-align: center;
}
#navi.open{
    transform: translateX(+1px);
}

/* toggleボタン配下のspanタグ */
/* index */
.toggle_btn span{
    width: 20px;
    height: 2px;
    display: block;
    background-color: #ffffff; 
    margin: 4px 0;
}
.toggle_btn{
    position: fixed;
    top: 30px;
    right: 20px;
    cursor: pointer;
    z-index: 100;
}
.toggle_btn.open span:nth-child(1){
    transform: translateY(1.4px) rotate(-50deg);
}
.toggle_btn.open span:nth-child(2){
    transform: translateY(-5px) rotate(50deg);
}
.toggle_btn.open span{
    background-color: #000000;
}

/* about */

.toggle_btn_about span{
    width: 20px;
    height: 2px;
    display: block;
    background-color: #000000; 
    margin: 4px 0;
}
.toggle_btn_about{
    position: fixed;
    top: 30px;
    right: 20px;
    cursor: pointer;
    z-index: 100;
}
.toggle_btn_about.open span:nth-child(1){
    transform: translateY(1.4px) rotate(-50deg);
}
.toggle_btn_about.open span:nth-child(2){
    transform: translateY(-5px) rotate(50deg);
}
.toggle_btn_about.open span{
    background-color: #000000;
}

#mask.open{
    background-color: #fff;
    opacity: .9;
    width: 350px;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0%;
    z-index: 50;
    transform: translateX(0px);
    transition: 1s;
}
@media(max-width: 770px){
    #navi{
        position: fixed; 
        top:20px;
        right: 30px;
        z-index: 200;
        transform: translateX(400px);
        transition: 1.2s;
        
    }
    #mask.open{
        width: 100%;
        opacity: 1;
    }
}




/*------------------------------------
ヘッダー a hover:下線アンダーライン ↓
------------------------------------*/
header ul li a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
header ul li a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 3px;
  background: #3b5d82;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}
header ul li a:hover {
  color: #3b5d82;
}
header ul li a:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}
/*------------------------------------
ヘッダー pcハンバーガーメニュー ↓
------------------------------------*/

/*------------------------------------
ヘッダー spハンバーガーメニュー ↓
------------------------------------*/
header .sp_nav {
  text-align: center;
}
.sidemenu {
  height: 100vh;
  padding-top: 100px;
  position: fixed;
  right: -40%; /*メニュー幅*/
  transition: all 0.6s;
  top: 0;
  width: 40%; /*メニュー幅*/
  z-index: 10;
  background-color: #fff;
}
.sidemenu nav ul li {
  padding: 7px;
  text-align: center;
}
.hamburger {
  cursor: pointer;
  height: 50px;
  position: absolute;
  right: 30px;
  top: 15px;
  width: 50px;
  z-index: 20;
  position: fixed;
}
.hamburger span {
  background-color: #36ff04;
  border-width: 100%;
  height: 2.5px;
  left: 10px;
  position: absolute;
  transition: all 0.6s;
  width: 30px;
}
.hamburger span.invert {
    background-color: #000;

}
.hamburger_linetop {
  top: 20px;
  border-color: #000000;
}
.hamburger_linebottom {
  top: 29px;
  background-color: #000000;

}
/*------------------------------------
メニュークリックした後 ↓
------------------------------------*/
.nav_open .sidemenu {
  right: 0;
}
.nav_open .hamburger span {
    background-color: #000000;
    z-index: 100;
}
.nav_open .hamburger_linetop {
  top: 26px;
  transform: rotate(45deg);
}
.nav_open .hamburger_linebottom {
  top: 26px;
  transform: rotate(-45deg);
}
.nav_open .overlay {
  opacity: 0.8;
  visibility: visible;
}
/*------------------------------------
メニュークリック後メニュー外の背景 ↓
------------------------------------*/
.overlay {
  background-color: #000;
  cursor: pointer;
  height: 100vh;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: all 0.6s;
  visibility: hidden;
  width: 100vw;
  z-index: 3;
}
/*------------------------------------
@media screen ~770px ↓
------------------------------------*/
@media screen and (max-width: 770px) {
  .sp_no {
    display: none;
  }
  .sidemenu {
    right: -100%; /*メニュー幅*/
    width: 100%; /*メニュー幅*/
    text-align: center;
  }
  .hamburger span {
    left: 30px;
    width: 25px;
  }
  .hamburger_linetop {
    top: 19px;
  }
  .hamburger_linebottom {
    top: 27px;
  }
}
@media screen and (min-width: 999px) {
  .pc_no {
    display: none;
  }
}