@charset "UTF-8";

/* =========================
   HEADER
========================= */
.site-header{
  position:fixed;
  top:0;
  left:0;
  z-index:80;
  width:100%;
  height:var(--header-h);
  background:rgba(255,255,255,.64);
  border-bottom:1px solid rgba(var(--line-r),var(--line-g),var(--line-b),.06);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.site-header.is-scrolled{
  background:rgba(255,255,255,.78);
  box-shadow:0 10px 30px rgba(var(--shadow-r),var(--shadow-g),var(--shadow-b),.05);
}

.site-header.is-menu-open{
  background:rgba(255,255,255,.24);
  border-bottom-color:transparent;
  box-shadow:none;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  height:100%;
}

@media (max-width:767px){
  .site-header{
    background:rgba(255,255,255,.78);
  }
}

/* =========================
   LOGO
========================= */
.logo{
  position:relative;
  z-index:95;
  display:flex;
  align-items:center;
  gap:3px;
  flex-shrink:0;
  font-size:15px;
  font-weight:700;
  line-height:1;
  letter-spacing:.08em;
}

.logo-mark,
.logo-text{
  display:block;
  flex:0 0 auto;
}

.logo-mark{
  display:grid;
  place-items:center;
  width:50px;
  height:50px;
}

.logo-mark img{
  width:auto;
  height:50px;
  max-width:none;
}

.logo-text img{
  width:auto;
  height:50px;
  max-width:none;
  padding-top:15px;
}

/* =========================
   PC NAV
========================= */
.gnav{
  display:flex;
  align-items:center;
  gap:10px;
}

.gnav > a,
.gnav-dropdown-trigger{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 12px;
  border-radius:999px;
  background:transparent;
  font-size:14px;
  font-weight:600;
  transition:
    color .25s ease,
    background .3s ease,
    transform .3s ease;
}

.gnav > a::after,
.gnav-dropdown-trigger .label::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:7px;
  height:1px;
  background:rgba(var(--text-r),var(--text-g),var(--text-b),.9);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .35s var(--ease);
}

.gnav > a:hover,
.gnav-dropdown:hover > .gnav-dropdown-trigger,
.gnav-dropdown:focus-within > .gnav-dropdown-trigger{
  background:rgba(255,255,255,.5);
  color:rgb(var(--text-r),var(--text-g),var(--text-b));
}

.gnav > a:hover{
  background:linear-gradient(
    90deg,
    #5b8cff,
    #8e6cff,
    #6fd3b5,
    #5b8cff
  );
  background-size:300% 300%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:navGradient 3s ease infinite;
}

@keyframes navGradient{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

.gnav > a:hover::after,
.gnav-dropdown:hover .gnav-dropdown-trigger .label::after,
.gnav-dropdown:focus-within .gnav-dropdown-trigger .label::after{
  transform:scaleX(1);
  transform-origin:left;
}

/* =========================
   DROPDOWN
========================= */
.gnav-dropdown{
  position:relative;
}

.gnav-dropdown::after{
  content:"";
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  height:16px;
}

.gnav-dropdown-trigger{
  border:none;
  cursor:pointer;
}

.gnav-dropdown-trigger .label{
  position:relative;
  display:inline-block;
}

.gnav-dropdown-trigger .label::after{
  left:0;
  right:0;
  bottom:-8px;
}

.gnav-dropdown-icon{
  width:14px;
  height:14px;
  opacity:.72;
  transition:
    transform .35s var(--ease),
    opacity .35s ease;
}

.gnav-dropdown:hover .gnav-dropdown-icon,
.gnav-dropdown:focus-within .gnav-dropdown-icon{
  transform:rotate(180deg);
  opacity:1;
}

.gnav-dropdown-panel{
  position:absolute;
  top:100%;
  left:50%;
  width:290px;
  padding-top:12px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(-50%) translateY(10px);
  transition:
    opacity .35s var(--ease),
    transform .35s var(--ease),
    visibility .35s ease;
}

.gnav-dropdown:hover .gnav-dropdown-panel,
.gnav-dropdown:focus-within .gnav-dropdown-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.gnav-dropdown-inner{
  padding:10px;
  border:1px solid rgba(0,0,0,.07);
  border-radius:24px;
  background:rgba(255,255,255,.9);
  box-shadow:
    0 24px 56px rgba(var(--shadow-r),var(--shadow-g),var(--shadow-b),.10),
    0 1px 0 rgba(255,255,255,.6) inset;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.gnav-dropdown-link{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:14px 16px;
  border-radius:16px;
  transition:
    background .28s ease,
    transform .28s ease;
}

.gnav-dropdown-link + .gnav-dropdown-link{
  margin-top:2px;
}

.gnav-dropdown-link small{
  color:rgba(var(--soft-r),var(--soft-g),var(--soft-b),.94);
  font-size:10px;
  line-height:1.3;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.gnav-dropdown-link strong{
  color:rgb(var(--text-r),var(--text-g),var(--text-b));
  font-size:14px;
  font-weight:600;
  line-height:1.55;
}

.gnav-dropdown-link:hover{
  background:rgba(0,0,0,.03);
  transform:translateX(4px);
}

/* =========================
   HEADER CTA
========================= */
.header-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:146px;
  height:46px;
  padding:0 18px;
  border-radius:999px;
  background:rgba(var(--text-r),var(--text-g),var(--text-b),.98);
  color:#fff;
  font-size:14px;
  font-weight:600;
  letter-spacing:.04em;
  box-shadow:0 10px 24px rgba(var(--shadow-r),var(--shadow-g),var(--shadow-b),.12);
  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.header-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(var(--shadow-r),var(--shadow-g),var(--shadow-b),.16);
}

/* =========================
   MOBILE MENU BUTTON
========================= */
.sp-menu-btn{
  display:none;
  position:relative;
  z-index:95;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border:1px solid rgba(0,0,0,.06);
  border-radius:999px;
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:
    transform .35s var(--ease-soft),
    background .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

.sp-menu-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(var(--shadow-r),var(--shadow-g),var(--shadow-b),.08);
}

.sp-menu-btn-line{
  position:relative;
  width:18px;
  height:12px;
}

.sp-menu-btn-line span,
.sp-menu-btn-line::before,
.sp-menu-btn-line::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  border-radius:999px;
  background:#111;
  transform-origin:center;
  transition:
    transform .42s var(--ease-soft),
    top .42s var(--ease-soft),
    opacity .28s ease;
}

.sp-menu-btn-line span{
  top:5px;
}

.sp-menu-btn-line::before{
  top:0;
}

.sp-menu-btn-line::after{
  top:10px;
}

.site-header.is-menu-open .sp-menu-btn{
  background:rgba(255,255,255,.82);
  border-color:rgba(0,0,0,.08);
}

.site-header.is-menu-open .sp-menu-btn-line span{
  opacity:0;
  transform:scaleX(.2);
}

.site-header.is-menu-open .sp-menu-btn-line::before{
  top:5px;
  transform:rotate(45deg);
}

.site-header.is-menu-open .sp-menu-btn-line::after{
  top:5px;
  transform:rotate(-45deg);
}

/* =========================
   MOBILE NAV
========================= */
.sp-nav{
  position:fixed;
  inset:0;
  z-index:75;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  padding-top:calc(var(--header-h) + 18px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity .45s ease,
    visibility .45s ease;
}

.sp-nav.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.sp-nav-backdrop{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.82) 100%);
  backdrop-filter:blur(18px) saturate(110%);
  -webkit-backdrop-filter:blur(18px) saturate(110%);
  opacity:0;
  transition:opacity .5s ease;
}

.sp-nav.is-open .sp-nav-backdrop{
  opacity:1;
}

.sp-nav-panel{
  position:relative;
  width:100%;
  height:calc(100svh - var(--header-h) - 18px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:0 18px calc(env(safe-area-inset-bottom) + 96px);
}

.sp-nav-list{
  display:grid;
  gap:6px;
}

.sp-nav-list > li{
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity .56s ease,
    transform .56s var(--ease-soft);
}

.sp-nav.is-open .sp-nav-list > li{
  opacity:1;
  transform:translateY(0);
}

.sp-nav.is-open .sp-nav-list > li:nth-child(1){ transition-delay:.08s; }
.sp-nav.is-open .sp-nav-list > li:nth-child(2){ transition-delay:.13s; }
.sp-nav.is-open .sp-nav-list > li:nth-child(3){ transition-delay:.18s; }
.sp-nav.is-open .sp-nav-list > li:nth-child(4){ transition-delay:.23s; }
.sp-nav.is-open .sp-nav-list > li:nth-child(5){ transition-delay:.28s; }
.sp-nav.is-open .sp-nav-list > li:nth-child(6){ transition-delay:.33s; }
.sp-nav.is-open .sp-nav-list > li:nth-child(7){ transition-delay:.38s; }

.sp-nav-list a,
.sp-nav-area-toggle{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  width:100%;
  min-height:74px;
  padding:10px 8px 14px;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(0,0,0,.08);
  color:rgb(var(--text-r),var(--text-g),var(--text-b));
  text-align:left;
  transition:transform .28s ease;
}

.sp-nav-list a:hover,
.sp-nav-area-toggle:hover{
  transform:translateX(4px);
}

.sp-nav-main{
  font-size:clamp(28px,8vw,42px);
  line-height:1.04;
  letter-spacing:-.05em;
  font-weight:600;
}

.sp-nav-sub{
  padding-bottom:6px;
  white-space:nowrap;
  color:rgba(var(--soft-r),var(--soft-g),var(--soft-b),.95);
  font-size:11px;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.sp-nav-area{
  border-bottom:1px solid rgba(0,0,0,.08);
}

.sp-nav-area-toggle{
  border-bottom:none;
}

.sp-nav-area-right{
  display:flex;
  align-items:center;
  gap:12px;
}

.sp-nav-area-icon{
  width:14px;
  height:14px;
  margin-bottom:4px;
  transition:transform .35s var(--ease);
}

.sp-nav-area.is-open .sp-nav-area-icon{
  transform:rotate(180deg);
}

.sp-nav-area-panel{
  display:grid;
  gap:0;
  max-height:0;
  overflow:hidden;
  opacity:.82;
  transition:
    max-height .45s var(--ease-soft),
    opacity .35s ease;
}

.sp-nav-area.is-open .sp-nav-area-panel{
  max-height:320px;
  opacity:1;
}

.sp-nav-area-panel a{
  min-height:auto;
  padding:14px 8px 14px 22px;
  border:none;
  font-size:18px;
  line-height:1.6;
  color:rgba(var(--muted-r),var(--muted-g),var(--muted-b),.96);
}

.sp-nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:54px;
  margin-top:20px;
  border-radius:999px;
  background:rgba(var(--text-r),var(--text-g),var(--text-b),.96);
  color:#fff;
  font-weight:600;
  letter-spacing:.04em;
  box-shadow:0 14px 28px rgba(var(--shadow-r),var(--shadow-g),var(--shadow-b),.12);
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity .56s ease,
    transform .56s var(--ease-soft);
}

.sp-nav.is-open .sp-nav-cta{
  opacity:1;
  transform:translateY(0);
  transition-delay:.42s;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:1080px){
  .gnav{
    gap:4px;
  }

  .gnav > a,
  .gnav-dropdown-trigger{
    padding:0 10px;
    font-size:13px;
  }
}

@media (max-width:767px){
  .gnav,
  .header-cta{
    display:none;
  }

  .sp-menu-btn{
    display:inline-flex;
  }
}

@media (min-width:768px){
  .sp-nav{
    display:none !important;
  }
}