/* Shared product navigation */
.site-menu{
  display:flex!important;
  align-items:center;
  gap:6px!important;
  margin:0;
  padding:0;
  list-style:none;
}
.nav-group{position:relative}
.nav-trigger,.nav-direct{
  position:relative;
  display:flex;
  align-items:center;
  gap:7px;
  min-height:42px;
  padding:10px 12px;
  border:0;
  border-radius:12px;
  color:#5d6785;
  background:transparent;
  font-family:'Noto Sans JP',sans-serif;
  font-size:12px;
  font-weight:700;
  line-height:1.4;
  white-space:nowrap;
  cursor:pointer;
  transition:color .18s,background .18s;
}
.nav-trigger::after{
  content:"";
  width:6px;
  height:6px;
  margin-top:-3px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform .18s;
}
.nav-direct::after{display:none!important}
.nav-group:hover>.nav-trigger,
.nav-trigger:focus-visible,
.nav-trigger.is-current,
.nav-direct:hover,
.nav-direct[aria-current="page"]{
  color:#fff;
  background:linear-gradient(135deg,rgba(83,103,242,.32),rgba(155,103,238,.24));
  box-shadow:inset 0 0 0 1px rgba(139,158,255,.28),0 8px 24px rgba(16,24,72,.2);
}
.nav-group:hover>.nav-trigger::after,
.nav-trigger:focus-visible::after{transform:translateY(3px) rotate(225deg)}
.nav-dropdown{
  position:absolute;
  z-index:500;
  top:calc(100% + 12px);
  left:50%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  width:720px;
  padding:16px;
  border:1px solid rgba(132,151,221,.25);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(11,18,45,.98),rgba(6,11,29,.98));
  box-shadow:0 28px 80px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter:blur(24px) saturate(1.3);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,8px);
  transition:opacity .18s,visibility .18s,transform .18s;
}
.nav-dropdown::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-group.nav-compact .nav-dropdown{grid-template-columns:repeat(2,minmax(0,1fr));width:720px}
.nav-group:hover>.nav-dropdown,
.nav-trigger:focus-visible + .nav-dropdown,
.nav-dropdown:focus-within{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}
.menu-card{
  display:grid!important;
  grid-template-columns:44px 1fr;
  gap:13px;
  align-items:center;
  min-width:0;
  min-height:86px;
  padding:15px 16px!important;
  border:1px solid rgba(133,153,222,.18)!important;
  border-radius:15px!important;
  color:#f6f8ff!important;
  background:linear-gradient(135deg,rgba(27,39,79,.92),rgba(13,22,52,.94))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 22px rgba(0,0,0,.13);
  text-align:left;
  white-space:normal!important;
  transition:background .18s,border-color .18s,transform .18s!important;
}
.menu-card::after{display:none!important}
.menu-card:hover,.menu-card[aria-current="page"]{
  color:#fff!important;
  border-color:rgba(132,154,255,.54)!important;
  background:linear-gradient(135deg,rgba(51,68,132,.96),rgba(48,34,102,.95))!important;
  box-shadow:0 12px 28px rgba(45,58,148,.24),inset 0 1px 0 rgba(255,255,255,.09);
  transform:translateY(-2px);
}
.menu-no{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(110deg,#5367f2,#9b67ee);
  font-family:'Outfit',sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  box-shadow:0 8px 20px rgba(83,103,242,.2);
}
.menu-card b{display:block;margin:0 0 5px;color:#f8faff;font-size:14px;line-height:1.45}
.menu-card small{display:block;color:#aab7d8;font-size:10px;font-weight:500;line-height:1.65}
.menu-card:hover small,.menu-card[aria-current="page"] small{color:#c6d1ef}
.menu-card:focus-visible{outline:2px solid #8aa3ff;outline-offset:2px}

@media (max-width:1100px) and (min-width:821px){
  .site-menu{gap:0!important}
  .nav-trigger,.nav-direct{padding-inline:9px;font-size:11px}
  .nav-dropdown,.nav-group.nav-compact .nav-dropdown{width:640px}
}

@media (max-width:820px){
  .menu-button{font-size:11px!important;font-weight:700;letter-spacing:.1em}
  .global-nav.open,#global-nav.open{max-height:calc(100vh - 88px)!important;overflow-y:auto!important}
  .site-menu{display:grid!important;gap:4px!important;padding:12px 16px 20px!important}
  .nav-trigger,.nav-direct{
    width:100%;
    min-height:44px;
    justify-content:space-between;
    padding:11px 12px!important;
    border-bottom:0!important;
    border-radius:12px;
    font-size:13px!important;
  }
  .nav-trigger::after{display:none}
  .nav-dropdown,.nav-group.nav-compact .nav-dropdown{
    position:static;
    display:grid;
    grid-template-columns:1fr;
    gap:7px;
    width:100%;
    padding:4px 0 10px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }
  .menu-card{grid-template-columns:36px 1fr;min-height:66px;padding:11px!important;border-color:rgba(133,153,222,.2)!important;background:linear-gradient(135deg,rgba(27,39,79,.94),rgba(13,22,52,.96))!important}
  .menu-no{width:36px;height:36px;border-radius:11px}
  .menu-card b{font-size:12px}
  .menu-card small{display:block;font-size:9px;line-height:1.5}
}

@media (max-width:520px){
  .nav-dropdown,.nav-group.nav-compact .nav-dropdown{grid-template-columns:1fr}
}

/* Mobile navigation alignment ------------------------------------------------
   Desktop hover/focus rules center dropdowns with translateX(-50%). On touch
   screens that state can remain active immediately after opening the menu and
   pull the first product group outside the viewport. Keep every mobile layer in
   one local coordinate system so all triggers and cards share the same edges. */
@media (max-width:820px){
  #global-nav{
    box-sizing:border-box!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100vh - 88px)!important;
    max-height:calc(100dvh - 88px)!important;
    margin:0!important;
    padding:10px 12px 16px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  #global-nav .site-menu{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:stretch!important;
    gap:5px!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
  }
  #global-nav .site-menu>li,
  #global-nav .nav-group{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  #global-nav .nav-trigger,
  #global-nav .nav-direct{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  #global-nav .nav-dropdown,
  #global-nav .nav-group.nav-compact .nav-dropdown,
  #global-nav .nav-group:hover>.nav-dropdown,
  #global-nav .nav-trigger:focus-visible + .nav-dropdown,
  #global-nav .nav-dropdown:focus-within{
    position:static!important;
    inset:auto!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:7px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:4px 0 10px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
  }
  #global-nav .nav-dropdown::before{display:none!important}
  #global-nav .menu-card{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    overflow:hidden;
  }
  #global-nav .menu-card>span:last-child{min-width:0}
  #global-nav .menu-card b,
  #global-nav .menu-card small{overflow-wrap:anywhere}
}

/* HOME-equivalent navigation for every detail page --------------------------
   The detail pages used to carry several generations of headers. The shared
   script now supplies one canonical structure; these rules keep its desktop
   and mobile presentation identical across the whole LP suite. */
body .site-header.unified-home-header{
  position:fixed!important;
  inset:12px 0 auto!important;
  z-index:600!important;
  width:min(1380px,calc(100% - 32px))!important;
  margin:0 auto!important;
  border:1px solid rgba(116,137,210,.28)!important;
  border-radius:24px!important;
  background:linear-gradient(145deg,rgba(7,12,31,.96),rgba(5,9,25,.97))!important;
  box-shadow:0 20px 58px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.045)!important;
  backdrop-filter:blur(22px) saturate(1.2)!important;
}
body .site-header.unified-home-header .header-inner{
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:12px!important;
  width:100%!important;
  max-width:none!important;
  height:76px!important;
  margin:0!important;
  padding:10px 18px!important;
}
body .site-header.unified-home-header .unified-home-brand{
  position:relative!important;
  display:block!important;
  box-sizing:border-box!important;
  flex:0 0 238px!important;
  width:238px!important;
  min-width:238px!important;
  height:45px!important;
  margin:0!important;
  border:1px solid rgba(255,255,255,.88)!important;
  border-radius:13px!important;
  background-color:#fff!important;
  background-image:url("../assets/onestep-logo-horizontal.webp")!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:calc(100% - 16px) auto!important;
  box-shadow:0 9px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.96)!important;
}
body .site-header.unified-home-header .unified-home-brand>*{display:none!important}
body .site-header.unified-home-header .header-socials{
  display:flex!important;
  flex:none!important;
  align-items:center!important;
  gap:6px!important;
  margin:0 3px 0 -4px!important;
}
body .site-header.unified-home-header .header-social{
  display:grid!important;
  place-items:center!important;
  flex:none!important;
  width:40px!important;
  height:40px!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.2)!important;
  border-radius:10px!important;
  color:#fff!important;
  box-shadow:0 7px 18px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.14)!important;
  line-height:1!important;
  transition:transform .18s ease,filter .18s ease!important;
}
body .site-header.unified-home-header .header-social:hover{filter:brightness(1.08);transform:translateY(-2px)}
body .site-header.unified-home-header .header-social-line{border-color:rgba(6,199,85,.55)!important;background:#06c755!important}
body .site-header.unified-home-header .header-social-line svg{
  width:23px!important;
  height:23px!important;
  color:#fff!important;
  display:block!important;
}
body .site-header.unified-home-header .header-social-x{background:#161616!important}
body .site-header.unified-home-header .header-social-x span{font-family:Arial,sans-serif!important;font-size:17px!important;font-weight:500!important}
body .site-header.unified-home-header .header-social-youtube{background:#ff0033!important}
body .site-header.unified-home-header .header-social-x svg,
body .site-header.unified-home-header .header-social-youtube svg{width:17px!important;height:17px!important;color:#fff!important;display:block!important}
body .site-header.unified-home-header .global-nav{
  position:static;
  flex:1 1 auto!important;
  min-width:0!important;
  margin:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body .site-header.unified-home-header .site-menu{justify-content:center!important}
body .site-header.unified-home-header .nav-trigger,
body .site-header.unified-home-header .nav-direct{color:#c4cce7!important}
body .site-header.unified-home-header .nav-group:hover>.nav-trigger,
body .site-header.unified-home-header .nav-group.is-open>.nav-trigger,
body .site-header.unified-home-header .nav-trigger:focus-visible,
body .site-header.unified-home-header .nav-trigger.is-current,
body .site-header.unified-home-header .nav-direct:hover{color:#fff!important}
body .site-header.unified-home-header .nav-group.is-open>.nav-dropdown{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translate(-50%,0)!important;
}
body .site-header.unified-home-header .detail-header-phone{
  display:grid!important;
  flex:none!important;
  min-width:138px!important;
  color:#f4f7ff!important;
  line-height:1.12!important;
  text-align:right!important;
  white-space:nowrap!important;
}
body .site-header.unified-home-header .detail-header-phone span,
body .site-header.unified-home-header .detail-header-phone small{color:#9eabd1!important;font-size:7px!important}
body .site-header.unified-home-header .detail-header-phone b{margin:2px 0!important;font-size:16px!important;letter-spacing:.025em!important}
body .site-header.unified-home-header .header-cta{
  display:inline-flex!important;
  flex:none!important;
  min-width:142px!important;
  min-height:48px!important;
  padding:10px 16px!important;
  border-radius:15px!important;
  color:#fff!important;
  white-space:nowrap!important;
}
body .site-header.unified-home-header .header-cta svg{width:20px!important;height:20px!important;fill:currentColor!important;stroke:none!important}
body .site-header.unified-home-header .menu-button{
  position:relative!important;
  display:none!important;
  place-items:center!important;
  flex:none!important;
  width:42px!important;
  height:42px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid rgba(139,157,220,.26)!important;
  border-radius:12px!important;
  color:#eef2ff!important;
  background:rgba(255,255,255,.055)!important;
}
body .site-header.unified-home-header .menu-button svg{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
body .site-header.unified-home-header .menu-button.is-open svg{opacity:0}
body .site-header.unified-home-header .menu-button.is-open::before,
body .site-header.unified-home-header .menu-button.is-open::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:20px;
  height:2px;
  border-radius:2px;
  background:currentColor;
}
body .site-header.unified-home-header .menu-button.is-open::before{transform:rotate(45deg)}
body .site-header.unified-home-header .menu-button.is-open::after{transform:rotate(-45deg)}

@media (max-width:1180px) and (min-width:821px){
  body .site-header.unified-home-header .detail-header-phone{display:none!important}
  body .site-header.unified-home-header .unified-home-brand{flex-basis:210px!important;width:210px!important;min-width:210px!important;height:40px!important}
  body .site-header.unified-home-header .header-inner{gap:9px!important;padding-inline:14px!important}
  body .site-header.unified-home-header .header-cta{display:inline-flex!important;min-width:126px!important;padding-inline:12px!important;font-size:12px!important}
}

@media (max-width:820px){
  body .site-header.unified-home-header{
    inset:8px 0 auto!important;
    width:calc(100% - 16px)!important;
    border-radius:18px!important;
  }
  body .site-header.unified-home-header .header-inner{
    gap:7px!important;
    height:58px!important;
    padding:7px 9px!important;
  }
  body .site-header.unified-home-header .unified-home-brand{
    order:1!important;
    flex:1 1 148px!important;
    width:auto!important;
    min-width:126px!important;
    max-width:186px!important;
    height:36px!important;
  }
  body .site-header.unified-home-header .header-socials{
    order:2!important;
    gap:7px!important;
    margin:0 0 0 auto!important;
  }
  body .site-header.unified-home-header .header-social{
    width:36px!important;
    height:36px!important;
    border-radius:11px!important;
  }
  body .site-header.unified-home-header .header-social-line svg{width:21px!important;height:21px!important}
  body .site-header.unified-home-header .header-social-x span{font-size:16px!important}
  body .site-header.unified-home-header .header-social-x svg,
  body .site-header.unified-home-header .header-social-youtube svg{width:16px!important;height:16px!important}
  body .site-header.unified-home-header .detail-header-phone,
  body .site-header.unified-home-header .header-cta{display:none!important}
  body .site-header.unified-home-header .menu-button{
    order:3!important;
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    flex:0 0 36px!important;
    width:36px!important;
    height:36px!important;
    margin-left:0!important;
    border-radius:11px!important;
  }
  body .site-header.unified-home-header #global-nav{
    position:fixed!important;
    inset:74px 8px auto!important;
    z-index:610!important;
    display:block!important;
    max-height:0!important;
    padding:0!important;
    overflow:hidden!important;
    border:1px solid transparent!important;
    border-radius:18px!important;
    background:rgba(5,9,27,.985)!important;
    box-shadow:0 24px 64px rgba(0,0,0,.5)!important;
    opacity:0!important;
    visibility:hidden!important;
    transition:max-height .28s ease,opacity .2s ease,visibility .2s ease,padding .2s ease,border-color .2s ease!important;
  }
  body .site-header.unified-home-header #global-nav.open{
    max-height:calc(100vh - 86px)!important;
    max-height:calc(100dvh - 86px)!important;
    padding:10px 12px 16px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    border-color:rgba(120,141,213,.28)!important;
    opacity:1!important;
    visibility:visible!important;
  }
  body .site-header.unified-home-header #global-nav .site-menu{justify-content:stretch!important}
  body .site-header.unified-home-header #global-nav .nav-trigger,
  body .site-header.unified-home-header #global-nav .nav-direct{color:#eef2ff!important;background:rgba(255,255,255,.035)!important}
  body .site-header.unified-home-header #global-nav .nav-trigger.is-current{background:linear-gradient(135deg,rgba(83,103,242,.32),rgba(155,103,238,.24))!important}
}

@media (max-width:390px){
  body .site-header.unified-home-header .unified-home-brand{min-width:114px!important;max-width:148px!important;height:32px!important}
  body .site-header.unified-home-header .header-inner{gap:5px!important}
  body .site-header.unified-home-header .header-socials{gap:5px!important}
  body .site-header.unified-home-header .header-social{width:32px!important;height:32px!important;border-radius:10px!important}
  body .site-header.unified-home-header .header-social-line svg{width:19px!important;height:19px!important}
  body .site-header.unified-home-header .header-social-x span{font-size:14px!important}
  body .site-header.unified-home-header .header-social-x svg,
  body .site-header.unified-home-header .header-social-youtube svg{width:14px!important;height:14px!important}
  body .site-header.unified-home-header .menu-button{flex-basis:32px!important;width:32px!important;height:32px!important;padding:0!important}
  body .site-header.unified-home-header .menu-button svg{width:17px!important;height:17px!important}
}

/* HOME-equivalent footer for every One Step Studio content page -----------
   The shared script supplies one canonical information architecture.  Keep
   the spacing, typography and legal row identical on desktop and mobile. */
body .site-footer.unified-home-footer{
  box-sizing:border-box!important;
  padding:54px 0 34px!important;
  color:#9da8d4!important;
  background:#060a20!important;
}
body .site-footer.unified-home-footer>.wrap{
  width:min(1180px,calc(100% - 40px))!important;
  max-width:none!important;
  margin:0 auto!important;
  padding:0!important;
}
body .site-footer.unified-home-footer .footer-grid{
  display:grid!important;
  grid-template-columns:1.2fr 1fr 1fr!important;
  gap:42px!important;
  margin:0 0 35px!important;
}
body .site-footer.unified-home-footer .footer-brand .brand{
  position:relative!important;
  display:block!important;
  box-sizing:border-box!important;
  width:270px!important;
  min-width:270px!important;
  height:52px!important;
  margin:0!important;
  border:1px solid rgba(255,255,255,.88)!important;
  border-radius:13px!important;
  background-color:#fff!important;
  background-image:url("../assets/onestep-logo-horizontal.webp")!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:calc(100% - 16px) auto!important;
  box-shadow:0 9px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.96)!important;
}
body .site-footer.unified-home-footer .footer-brand .brand>*{display:none!important}
body .site-footer.unified-home-footer .footer-brand p{
  margin:14px 0 0!important;
  color:#9da8d4!important;
  font-size:11px!important;
  line-height:1.75!important;
}
body .site-footer.unified-home-footer h4{
  margin:0 0 12px!important;
  color:#fff!important;
  font-family:'Noto Sans JP',sans-serif!important;
  font-size:11px!important;
  letter-spacing:.08em!important;
}
body .site-footer.unified-home-footer ul{
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
  font-size:11px!important;
}
body .site-footer.unified-home-footer li,
body .site-footer.unified-home-footer li a{
  color:#9da8d4!important;
  font-size:11px!important;
  line-height:1.55!important;
}
body .site-footer.unified-home-footer a:hover{color:#fff!important}
body .site-footer.unified-home-footer .pending-links{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:13px!important;
  margin-top:10px!important;
  color:#7f89b4!important;
  font-size:10px!important;
}
body .site-footer.unified-home-footer .pending-links a,
body .site-footer.unified-home-footer .pending-links span{color:#7f89b4!important;font-size:10px!important}
body .site-footer.unified-home-footer .footer-bottom{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  margin:0!important;
  padding:24px 0 0!important;
  border-top:1px solid rgba(255,255,255,.09)!important;
  color:#9da8d4!important;
  font-size:10px!important;
}

@media(max-width:820px){
  body .site-footer.unified-home-footer{
    padding-top:28px!important;
    padding-right:0!important;
    padding-left:0!important;
  }
  body.theme-midnight-ai .site-footer.unified-home-footer{padding-bottom:calc(16px + env(safe-area-inset-bottom))!important}
  body:not(.theme-midnight-ai) .site-footer.unified-home-footer{padding-bottom:calc(88px + env(safe-area-inset-bottom))!important}
  body .site-footer.unified-home-footer>.wrap{width:min(100% - 28px,580px)!important}
  body .site-footer.unified-home-footer .footer-grid{
    grid-template-columns:1fr!important;
    gap:11px!important;
    margin-bottom:13px!important;
  }
  body .site-footer.unified-home-footer .footer-grid>div{min-width:0!important;margin:0!important}
  body .site-footer.unified-home-footer .footer-brand .brand{
    width:230px!important;
    min-width:230px!important;
    height:45px!important;
  }
  body .site-footer.unified-home-footer .footer-brand p{
    margin:6px 0 0!important;
    font-size:10px!important;
    line-height:1.48!important;
  }
  body .site-footer.unified-home-footer h4{margin:0 0 4px!important;line-height:1.45!important}
  body .site-footer.unified-home-footer ul{display:block!important}
  body .site-footer.unified-home-footer li,
  body .site-footer.unified-home-footer li+li{
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    line-height:1.48!important;
  }
  body .site-footer.unified-home-footer li>a{
    display:block!important;
    min-height:0!important;
    margin:0!important;
    padding:2px 0!important;
    line-height:1.48!important;
  }
  body .site-footer.unified-home-footer .pending-links{
    gap:3px 10px!important;
    margin-top:3px!important;
    line-height:1.48!important;
  }
  body .site-footer.unified-home-footer .pending-links a{display:inline!important;padding:0!important;line-height:1.48!important}
  body .site-footer.unified-home-footer .footer-bottom{
    display:grid!important;
    justify-content:stretch!important;
    gap:3px!important;
    padding-top:10px!important;
    line-height:1.45!important;
  }
}