.header{
  position:fixed;
  top:3.5rem;
  left:4rem;
  display:flex;
  gap:42.6rem;
  width:136rem;
  z-index:9999;
}
.header__logo{
  width:20.4rem;
  flex:0 0 20.4rem;
}
.header__logo img{
  width:20.4rem;
  height:auto;
  transition:width 0.3s ease;
}
.header.is-scrolled .header__logo img{
  width:10.5rem;
}
.header__menu-toggle,
.header__sp-assets,
.header__submenu-toggle,
.header__nav .header__submenu{
  display:none;
}
.header__nav > ul{
  width:73rem;
  height:6rem;
  border-radius:3.6rem;
  box-shadow:0 0 0.6rem #00000029;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background-color:white;
  padding:0 5rem;
}
.header__nav > ul > li{
  font-size:1.6rem;
  font-weight:500;
  color:#202020;
}
.header__nav > ul > li > a{
  transition:color 0.3s ease;
}
.header__nav > ul > li:not(:last-child) > a:hover{
  color:#019A6C;
}
.header__nav > ul > li:last-child{
  width:11.6rem;
  height:4rem;
  color:white;
  background-color:#019A6C;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:1rem;
  padding:0 0.5rem;
  transition:background-color 0.3s ease;
}
.header__nav > ul > li:last-child:hover{
  background-color:#09CE93;
}
.header__bg{
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:64.7rem;
}
@media screen and (max-width:699.98px) {
  body.is-menu-open{
    overflow:hidden;
  }
  .header{
    top:0;
    left:0;
    display:block;
    width:100%;
    height:10.8rem;
  }
  .header.is-menu-open{
    height:100vh;
    height:100dvh;
    overflow-y:auto;
    background-color:#FEF5E2;
    background-image:url("../img/header_footer/logo_bg_1.png");
    background-repeat:no-repeat;
    background-position:top left;
    background-size:31.5rem auto;
  }
  .header__logo{
    position:absolute;
    top:2.4rem;
    left:2.2rem;
    width:10.1rem;
    z-index:2;
  }
  .header__logo img,
  .header.is-scrolled .header__logo img{
    width:10.1rem;
  }
  .header__menu-toggle{
    position:absolute;
    top:2.4rem;
    right:1.8rem;
    z-index:3;
    display:flex;
    justify-content:center;
    align-items:center;
    width:4.5rem;
    height:4.5rem;
    border-radius:50%;
    background-color:#019A6C;
    cursor:pointer;
    transition:opacity 0.3s ease;
  }
  .header__menu-icon,
  .header__menu-icon::before,
  .header__menu-icon::after{
    position:absolute;
    width:2.5rem;
    height:0.1rem;
    background-color:white;
    transition:transform 0.35s ease, opacity 0.3s ease, background-color 0.3s ease;
  }
  .header__menu-icon::before,
  .header__menu-icon::after{
    content:"";
    left:0;
  }
  .header__menu-icon::before{
    transform:translateY(-0.8rem);
  }
  .header__menu-icon::after{
    transform:translateY(0.8rem);
  }
  .header.is-menu-open .header__menu-icon{
    background-color:transparent;
  }
  .header.is-menu-open .header__menu-icon::before{
    transform:rotate(30deg);
  }
  .header.is-menu-open .header__menu-icon::after{
    transform:rotate(-30deg);
  }
  .header__nav{
    position:absolute;
    top:14.9rem;
    left:6rem;
    z-index:2;
    width:26rem;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-1rem);
    transition:opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
  }
  .header.is-menu-open .header__nav{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }
  .header__nav > ul{
    width:100%;
    height:auto;
    border-radius:0;
    box-shadow:none;
    flex-direction:column;
    align-items:stretch;
    background-color:transparent;
    padding:0;
  }
  .header__nav > ul > li{
    position:relative;
    width:100%;
    line-height:2.4rem;
  }
  .header__nav > ul > li:not(:last-child){
    margin-bottom:2rem;
  }
  .header__nav > ul > li:last-child{
    width:100%;
    height:4rem;
    border-radius:0.5rem;
    padding:0;
  }
  .header__nav > ul > li:last-child > a{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
  }
  .header__submenu-toggle{
    position:absolute;
    top:0;
    right:0;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    width:4rem;
    height:2.4rem;
    cursor:pointer;
  }
  .header__submenu-icon{
    width:1.3rem;
    height:1.3rem;
    border-right:0.4rem solid currentColor;
    border-bottom:0.4rem solid currentColor;
    transform:rotate(45deg);
    transition:transform 0.35s ease;
  }
  .header__nav > ul > li.is-open .header__submenu-icon{
    transform:rotate(225deg);
  }
  .header__nav .header__submenu{
    display:block;
    width:100%;
    max-height:0;
    overflow:hidden;
    opacity:0;
    padding-left:1.5rem;
    transition:max-height 0.35s ease, opacity 0.25s ease, margin-top 0.35s ease;
  }
  .header__nav > ul > li.is-open > .header__submenu{
    max-height:7rem;
    opacity:1;
    margin-top:1rem;
  }
  .header__submenu li{
    font-size:1.4rem;
    line-height:2.4rem;
  }
  .header__sp-assets{
    position:absolute;
    inset:0;
    z-index:1;
    display:block;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity 0.35s ease, visibility 0.35s;
  }
  .header.is-menu-open .header__sp-assets{
    opacity:1;
    visibility:visible;
  }
  .header__sp-asset{
    position:absolute;
    height:auto;
  }
  .header__sp-asset--red{
    top:37.9rem;
    right:-3.4rem;
    width:27.7rem;
  }
  .header__sp-asset--yellow{
    top:41.2rem;
    left:-0.7rem;
    width:10.8rem;
  }
  .header__bg{
    width:31.5rem;
    z-index:-1;
    pointer-events:none;
  }
  .header.is-menu-open + .header__bg{
    opacity:0;
  }
}