.header-nav {
  --text-base-color : #3D3936;
  --main-color : #C64A1D;
  background-color : #FFFEF9;
  border-radius : 2rem;
  position: sticky;
  top : 1rem;
  margin-bottom : 2rem;
  z-index: 1000;
  width:calc(100% - 2rem);
  margin-inline : 1rem;
  .row {
    align-items: center;
  }
}
@media(min-width : 576px){
  .header-nav {
    width:100%;
    margin-inline : auto;
  }
}

body:has(.hero-area.scroll-in.is-visible) .header-nav {
  position: relative;
  margin-bottom : 0;
}
body:has(.hero-area.scroll-in.is-visible) .header-nav .row {
  align-items: start;
}

.header-logo img {
  display: block;
  width : auto;
  height : 40px;
}
body:has(.hero-area.scroll-in.is-visible) .header-logo img {
  height : 78px;
}
@media(min-width :768px){
.header-logo img {
  width : 171px;
  height : auto;
}
}
@media(min-width :992px){
body:has(.hero-area.scroll-in.is-visible) .header-logo img {
  width : 374px;
  height : auto;
}
}
.header-nav__links {
  gap: 0.75rem;
}

.header-nav a {
  color:  var(--text-base-color);
  font-weight: bold;
}
.header-nav a.link-color p {
  color: var(--main-color);
  font-size: 1.6em;
}

.header-nav__btn {
  margin-left: 0.5rem;
  margin-bottom: 0;
  a {
     color: #FFFEF9;
     font-size: 1.2em;
     background-color: var(--main-color);
     padding:0.5rem 1rem;
     display: block;
  }
}

/* ハンバーガーーメニュー */
.header-nav.header-nav--sp {
  border-radius : 0;
  padding : 2rem;
  backdrop-filter : blur(10px);
  background-color : rgba(255,254,249,0.9);
  box-shadow : 0 0 32px rgba(0,0,0,0.2);
  overflow-y : auto;
  .header-logo img {
    margin-inline : auto;
    width : 80%;
    max-width : 171px;
    height : auto !important;
    margin : 0;
  }
  .menu-btn-wrapper {
    position : absolute;
    top:2rem;
    right:2rem;
  }
  .header-nav__links {
    text-align : center;
  }
  .header-nav__links a {
    font-size : 1.2rem;
  }
  a.link-color p {
    font-size : 1.2rem;
  }
}
#root .header-nav.header-nav--sp {
  position:fixed !important;
  top:0;
  right : 0;
  margin : 0;
  width : calc(100% - 2rem);
  height : 100dvh;
  transform : translateX(100vw);
  transition : transform .6s;
}
#root .header-nav.header-nav--sp.is-open {
  transform : translateX(0);
  
}