body,
.site-header{
  font-family:'Phetsarath','Noto Sans JP',sans-serif;
}

.site-header{
  position:fixed;
  top:0;
  width:100%;
  max-width: 470px;
  z-index:10020;
  transition:background-color .3s ease;
  background:transparent;
}

.site-header.is-scrolled{
  background:#1f2c5c;
}

body.is-drawer-open .site-header{
  background:transparent!important;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  width:min(90%,1200px);
  margin:0 auto;
}

body{
  padding-top:64px;
}

.header-logo{
  transition:opacity .25s ease;
}

.header-logo img{
  display:block;
  height:36px;
  width:auto;
}

.header-nav{
  display:none;
}

.header-btn{
  display:none;
}

/* Hamburger */
.hamburger{
  display:block;
  width:44px;
  height:44px;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  position:relative;
  z-index:10030;
}

.hamburger span{
  position:absolute;
  left:10px;
  right:10px;
  height:2px;
  border-radius:2px;
  background:#fff;
  transition:transform .25s ease,top .25s ease,opacity .2s ease;
}

.hamburger span:nth-child(1){top:14px;}
.hamburger span:nth-child(2){top:21px;}
.hamburger span:nth-child(3){top:28px;}

body.is-drawer-open .hamburger{
  position:fixed;
  top:14px;
  right:20px;
}

body.is-drawer-open .hamburger span:nth-child(1){
  top:21px;
  transform:rotate(45deg);
}

body.is-drawer-open .hamburger span:nth-child(2){
  opacity:0;
}

body.is-drawer-open .hamburger span:nth-child(3){
  top:21px;
  transform:rotate(-45deg);
}

/* Drawer */
.sp-drawer{
  position:fixed;
  inset:0;
  z-index:10010;
  pointer-events:none;
  display:block;
}

body.is-drawer-open .header-logo{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sp-drawer::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);
  opacity:0;
  transition:opacity .35s ease;
}

.sp-drawer__inner{
  position:fixed;
  top:0;
  right:0;
  height:100%;
  width:100%;
  max-width:480px;
  background:#0b1e56;
  transform:translateX(100%);
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  z-index:10011;
}

body.is-drawer-open .sp-drawer{
  pointer-events:auto;
}

body.is-drawer-open .sp-drawer::before{
  opacity:1;
}

body.is-drawer-open .sp-drawer__inner{
  transform:translateX(0);
}

/* Logo */
.sp-drawer__logo{
  margin-top:56px;
  display:flex;
  justify-content:center;
}

.sp-drawer__logo img{
  display:block;
  height:40px;
  width:auto;
}

/* Nav */
.sp-drawer__nav{
  margin-top:40px;
}

.sp-drawer__nav ul{
  width:90%;
  margin:auto;
  display:flex;
  flex-direction:column;
  gap:20px;
  list-style:none;
}

.sp-drawer__nav a{
  color:#fff;
  text-decoration:none;
  letter-spacing:.10em;
  font-weight:600;
  font-size:16px;
}

/* Animation */
.sp-drawer__item{
  opacity:0;
  transform:translateX(18px);
  transition:opacity .35s ease,transform .35s ease;
}

body.is-drawer-open .sp-drawer__item{
  opacity:1;
  transform:translateX(0);
}

body.is-drawer-open .sp-drawer__item:nth-child(1){transition-delay:.52s;}
body.is-drawer-open .sp-drawer__item:nth-child(2){transition-delay:.56s;}
body.is-drawer-open .sp-drawer__item:nth-child(3){transition-delay:.60s;}
body.is-drawer-open .sp-drawer__item:nth-child(4){transition-delay:.64s;}
body.is-drawer-open .sp-drawer__item:nth-child(5){transition-delay:.68s;}
body.is-drawer-open .sp-drawer__item:nth-child(6){transition-delay:.72s;}
body.is-drawer-open .sp-drawer__item:nth-child(7){transition-delay:.76s;}
body.is-drawer-open .sp-drawer__item:nth-child(8){transition-delay:.80s;}
body.is-drawer-open .sp-drawer__item:nth-child(9){transition-delay:.84s;}

/* Actions */
.sp-drawer__actions{
  position:absolute;
  bottom:10%;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:12px;
  z-index:10012;
}

.sp-drawer__actions a img{
  display:block;
  height:44px;
  width:auto;
}

/* Disable scroll */
body.is-drawer-open{
  overflow:hidden;
}