:root{
  --sui-navy:#1d6687;
  --sui-orange:#ed6200;
  --sui-orange-dark:#d85600;
  --sui-ink:#1d1d1f;
  --sui-footer:#173f52;
}
.sui-site-header{position:relative;z-index:9999;background:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",Arial,sans-serif}
.sui-topline{background:var(--sui-navy);color:#fff;text-align:center;padding:10px 18px;font-size:15px;letter-spacing:.055em;line-height:1.4}
.sui-mainbar{background:var(--sui-orange);color:#fff;display:flex;align-items:center;gap:24px;padding:18px 4vw;min-height:92px}
.sui-brand{display:block;flex:0 1 410px;min-width:240px}
.sui-brand img{display:block;width:min(390px,100%);height:auto}
.sui-nav{margin-left:auto;display:flex;align-items:center;gap:23px;font-size:15px;font-weight:650;white-space:nowrap}
.sui-nav>a,.sui-nav button{color:#fff!important;text-decoration:none!important;background:none;border:0;font:inherit;padding:10px 0;cursor:pointer}
.sui-nav>a:hover,.sui-nav button:hover{text-decoration:underline!important}
.sui-start{background:var(--sui-navy)!important;padding:12px 20px!important;border-radius:3px;color:#fff!important;text-decoration:none!important}
.sui-login{padding-left:2px!important}
.sui-lang{position:relative}
.sui-lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:250px;background:#fff;color:var(--sui-ink);padding:10px;border-radius:7px;box-shadow:0 14px 36px rgba(0,0,0,.2);display:none;grid-template-columns:1fr 1fr;gap:6px;border:1px solid #e2e2e2}
.sui-lang.open .sui-lang-menu{display:grid}
.sui-lang-menu a{display:block;color:#222!important;padding:10px 11px;border-radius:5px;text-decoration:none!important;font-weight:600}
.sui-lang-menu a:hover{background:#f2f3f5}
.sui-lang-menu a.active{background:#fff0e5;color:#d65300!important;box-shadow:inset 0 0 0 1px #f0b284}
.sui-mobile-toggle{display:none;margin-left:auto;width:46px;height:42px;border:1px solid rgba(255,255,255,.8);border-radius:5px;background:transparent;color:#fff;font-size:26px;line-height:1;align-items:center;justify-content:center}
.sui-mobile-panel{display:none;background:#fff;border-bottom:1px solid #ddd;padding:10px 20px 20px}
.sui-mobile-panel a{display:block;color:#222!important;text-decoration:none!important;padding:11px 4px;border-bottom:1px solid #eee;font-weight:600}
.sui-mobile-panel .mobile-start{color:#fff!important;background:var(--sui-navy);padding:12px 14px;margin-top:10px;border-radius:3px;text-align:center;border:0}
.sui-mobile-langs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:14px}
.sui-mobile-langs a{text-align:center;border:1px solid #ddd;border-radius:4px;padding:8px!important}
.sui-mobile-langs a.active{border-color:var(--sui-orange);color:var(--sui-orange)!important;background:#fff7f1}
.sui-site-footer{text-align:left;background:var(--sui-footer);color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",Arial,sans-serif;padding:42px 5vw 28px;margin-top:0}
.sui-footer-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px}
.sui-footer-title{font-size:18px;font-weight:800;letter-spacing:.04em;margin:0 0 12px}
.sui-footer-copy{font-size:14px;line-height:1.75;color:rgba(255,255,255,.8)}
.sui-footer-links{display:grid;gap:9px}
.sui-footer-links a{color:#fff!important;text-decoration:none!important;font-size:14px}
.sui-footer-links a:hover{text-decoration:underline!important}
.sui-footer-bottom{max-width:1180px;margin:30px auto 0;border-top:1px solid rgba(255,255,255,.22);padding-top:20px;font-size:13px;color:rgba(255,255,255,.68)}
/* Shared CTA improvements */
.shubukan-official-cta{margin-top:28px}
.shubukan-official-cta a{display:inline-flex;align-items:center;justify-content:center;background:var(--sui-orange);color:#fff!important;text-decoration:none!important;padding:14px 24px;border-radius:3px;font-weight:750;min-height:48px}
.shubukan-official-cta a:hover{background:var(--sui-orange-dark)}
/* Features overlap fixes */
.sui-lp .step-card{position:relative;padding-top:76px!important}
.sui-lp .step-card>.orange-badge{position:absolute!important;top:20px!important;right:18px!important;z-index:2}
.sui-lp .step-card>.step-icon,.sui-lp .step-card>.material-step-icon{width:48px!important;height:48px!important;display:block!important;margin:0 auto 28px!important;object-fit:contain!important}
.sui-lp .step-card h3{margin-top:0!important}
.sui-lp .plan-card.popular{position:relative;padding-top:78px!important}
.sui-lp .plan-card.popular>.plan-chip{position:absolute!important;top:22px!important;right:24px!important;z-index:2}
.sui-lp .higher-ranks-section{margin-top:56px!important}
/* Curriculum readability */
.curriculum-page .grade-info-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}
.curriculum-page .info-card{min-height:132px!important;padding:18px 20px!important;border-left:4px solid #1c6688!important;border-radius:12px!important}
.curriculum-page .info-label{font-size:.94rem!important;color:#777!important;margin-bottom:10px!important}
.curriculum-page .info-value{font-size:1.04rem!important;line-height:1.55!important}
.curriculum-page .lessons-title{font-size:1.3rem!important;border-left:0!important;border-bottom:2px solid #1c6688!important;padding:0 0 9px!important;margin-top:28px!important}
.curriculum-page .lessons-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px 16px!important}
.curriculum-page .lesson-item{border:1px solid #e2e5e9!important;border-radius:8px!important;padding:10px 12px!important;background:#fafbfc!important}
.curriculum-page .lesson-num{background:#1c6688!important;color:#fff!important}
.curriculum-page .back-link{display:none!important}
@media(max-width:1050px){.sui-nav{gap:14px;font-size:14px}.sui-brand{flex-basis:330px}}
@media(max-width:900px){
  .sui-mainbar{min-height:80px;padding:14px 20px}.sui-brand{flex-basis:330px}.sui-nav{display:none}.sui-mobile-toggle{display:flex}.sui-mobile-panel.open{display:block}
  .sui-footer-inner{grid-template-columns:1fr 1fr}.sui-footer-about{grid-column:1/-1}
  .curriculum-page .grade-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:640px){
  .sui-topline{font-size:12px}.sui-brand{min-width:0;flex:1}.sui-brand img{width:min(300px,100%)}
  .sui-footer-inner{grid-template-columns:1fr;gap:28px}.sui-footer-about{grid-column:auto}
  .curriculum-page .grade-info-grid,.curriculum-page .lessons-grid{grid-template-columns:1fr!important}
  .sui-lp .step-card{padding-top:70px!important}.sui-lp .plan-card.popular{padding-top:76px!important}
}


/* 2026-09-16 review refinements */
/* Compact desktop navigation with Who It's For dropdown */
.sui-nav{gap:18px;font-size:15px}
.sui-menu-dropdown{position:relative}
.sui-menu-dropdown>button{color:#fff!important;text-decoration:none!important;background:none;border:0;font:inherit;font-weight:650;padding:10px 0;cursor:pointer}
.sui-menu-dropdown-menu{position:absolute;left:0;top:calc(100% + 8px);min-width:190px;background:#fff;color:var(--sui-ink);padding:8px;border-radius:7px;box-shadow:0 14px 36px rgba(0,0,0,.2);display:none;border:1px solid #e2e2e2}
.sui-menu-dropdown.open .sui-menu-dropdown-menu{display:block}
.sui-menu-dropdown-menu a{display:block;color:#222!important;padding:10px 11px;border-radius:5px;text-decoration:none!important;font-weight:600}
.sui-menu-dropdown-menu a:hover{background:#f2f3f5}
.sui-mobile-group-title{font-weight:800;color:#666;padding:14px 4px 4px;font-size:13px;text-transform:none}

/* Unified hero text treatment */
.sui-home-hero-overlay{background:transparent!important;color:#fff!important;padding:28px 34px!important;max-width:760px!important}
.sui-home-hero-overlay h1,.sui-home-hero-overlay p{color:#fff!important}
.sui-hero-overlay{background:rgba(0,0,0,.58)!important;color:#fff!important;padding:20px 34px!important;letter-spacing:.08em!important;line-height:1.25!important;max-width:82%!important}
.beginner-hero-tight{margin-top:0!important;padding-top:0!important}
.beginner-hero-tight .hero-image-wrap{margin-top:12px!important}

/* Curriculum readability: preserve compact layout, increase type */
.curriculum-page .curriculum-hero p,.curriculum-page .page-subtitle,.curriculum-page .hero-subtitle{font-size:26px!important;line-height:1.5!important}
.curriculum-page .grade-header h2,.curriculum-page .grade-title{font-size:30px!important}
.curriculum-page .lesson-count{font-size:19px!important}
.curriculum-page .info-label{font-size:18px!important;line-height:1.35!important}
.curriculum-page .info-value{font-size:20px!important;line-height:1.55!important}
.curriculum-page .lessons-title{font-size:24px!important}
.curriculum-page .lesson-item{font-size:20px!important;line-height:1.45!important}
.curriculum-page .lesson-num{font-size:16px!important;min-width:34px!important;height:34px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}

/* Click-to-load YouTube embeds */
.youtube-lazy{height:100%;background:#fff;border:1px solid rgba(0,0,0,.12);padding:0 0 18px;box-shadow:0 4px 16px rgba(0,0,0,.04)}
.youtube-lazy-button{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;background:#111;overflow:hidden;cursor:pointer}
.youtube-thumb{display:block;width:100%;height:100%;object-fit:cover}
.youtube-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:74px;height:52px;border-radius:13px;background:rgba(18,18,18,.88);color:#fff;font-size:30px;line-height:1;padding-left:4px;box-shadow:0 3px 14px rgba(0,0,0,.35)}
.youtube-lazy-button:hover .youtube-play{background:#ed6200}
.youtube-card-title{text-align:center;padding:16px 12px 0;font-size:20px}
.youtube-embed{width:100%;aspect-ratio:16/9;border:0;display:block}

@media(max-width:1200px){.sui-nav{gap:12px;font-size:14px}.sui-brand{flex-basis:300px}}
@media(max-width:900px){.sui-home-hero-overlay{padding:24px!important}.sui-hero-overlay{max-width:90%!important}}
@media(max-width:640px){
  .sui-home-hero-overlay{padding:20px!important;max-width:92%!important}
  .sui-hero-overlay{padding:16px 20px!important;max-width:94%!important;font-size:30px!important;letter-spacing:.04em!important}
  .beginner-hero-tight .hero-image-wrap{margin-top:8px!important}
  .curriculum-page .curriculum-hero p,.curriculum-page .page-subtitle,.curriculum-page .hero-subtitle{font-size:20px!important}
  .curriculum-page .info-label{font-size:16px!important}.curriculum-page .info-value,.curriculum-page .lesson-item{font-size:18px!important}
}


/* === 2026-09-16 final shared-shell update === */

/* Desktop header: compact enough for Japanese, but switch to mobile before it breaks. */
.sui-mainbar{
  gap:16px!important;
  padding:14px 2.4vw!important;
  min-height:86px!important;
}
.sui-brand{
  flex:0 1 315px!important;
  min-width:230px!important;
}
.sui-brand img{width:min(305px,100%)!important}
.sui-nav{
  gap:14px!important;
  font-size:15px!important;
  white-space:nowrap!important;
}
.sui-nav>a,.sui-nav button{
  line-height:1.2!important;
}
.sui-menu-dropdown,
.sui-lang{position:relative!important}
.sui-menu-dropdown-menu,
.sui-lang-menu{
  z-index:10050!important;
}
.sui-menu-dropdown-menu{
  position:absolute!important;
  left:0!important;
  top:calc(100% + 8px)!important;
  min-width:190px!important;
  background:#fff!important;
  color:var(--sui-ink)!important;
  padding:8px!important;
  border-radius:7px!important;
  box-shadow:0 14px 36px rgba(0,0,0,.22)!important;
  border:1px solid #e2e2e2!important;
}
.sui-menu-dropdown.open .sui-menu-dropdown-menu{display:block!important}
.sui-menu-dropdown-menu a{
  display:block!important;
  color:#222!important;
  padding:10px 11px!important;
  border-radius:5px!important;
  text-decoration:none!important;
  font-weight:650!important;
}
.sui-menu-dropdown-menu a:hover{background:#f2f3f5!important}

/* Footer social links */
.sui-footer-social{margin-top:20px}
.sui-footer-social-title{
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  color:rgba(255,255,255,.72);
  margin-bottom:10px;
}
.sui-footer-social-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
}
.sui-footer-social-links a{
  color:#fff!important;
  text-decoration:none!important;
  font-size:14px;
  font-weight:700;
}
.sui-footer-social-links a:hover{text-decoration:underline!important}

/* Curriculum type scale */
.curriculum-page .curriculum-header p{
  font-size:26px!important;
  line-height:1.55!important;
}
.curriculum-page .info-label{
  font-size:20px!important;
  line-height:1.4!important;
}
.curriculum-page .info-value{
  font-size:20px!important;
  line-height:1.6!important;
}
.curriculum-page .lessons-title{
  font-size:24px!important;
}
.curriculum-page .lesson-item{
  font-size:20px!important;
  line-height:1.5!important;
}
.curriculum-page .grade-header h2{
  font-size:30px!important;
}
.curriculum-page .lesson-count{
  font-size:20px!important;
}

/* Switch to hamburger before desktop Japanese navigation crowds/overflows. */
@media(max-width:1180px){
  .sui-nav{display:none!important}
  .sui-mobile-toggle{display:flex!important}
  .sui-mainbar{padding:14px 20px!important}
  .sui-brand{flex:1 1 auto!important;max-width:330px!important}
  .sui-mobile-panel.open{display:block!important}
}
@media(max-width:640px){
  .curriculum-page .curriculum-header p{font-size:20px!important}
  .curriculum-page .info-label{font-size:17px!important}
  .curriculum-page .info-value,
  .curriculum-page .lesson-item{font-size:18px!important}
}


/* Beginners final CTA */
.beginners-final-cta{
  padding:72px 20px;
}
.beginners-final-cta-inner{
  max-width:920px;
  margin:0 auto;
  text-align:center;
  padding:52px 28px;
  border-radius:18px;
  background:#f4f1ea;
}
.beginners-final-cta-inner h2{
  margin:0 0 16px;
  font-size:clamp(30px,4vw,44px);
  line-height:1.2;
}
.beginners-final-cta-inner p{
  max-width:700px;
  margin:0 auto 28px;
  font-size:18px;
  line-height:1.7;
}
.beginners-final-cta-inner .btn{
  display:inline-block;
}
@media(max-width:640px){
  .beginners-final-cta{padding:52px 16px}
  .beginners-final-cta-inner{padding:38px 20px}
}


/* Karate belt icon for Certificate / Next KYU card */
.karate-belt-icon{
  width:48px!important;
  height:48px!important;
  object-fit:contain;
  display:block;
  margin-left:auto;
  margin-right:auto;
}


/* Home hero gradient — desktop and mobile */
.home-body .hero{
  position:relative!important;
  isolation:isolate;
  overflow:hidden;
}
.home-body .hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.96) 0%,
    rgba(0,0,0,.92) 34%,
    rgba(0,0,0,.78) 52%,
    rgba(0,0,0,.50) 68%,
    rgba(0,0,0,.18) 83%,
    rgba(0,0,0,0) 100%
  )!important;
}
.home-body .hero .hero-img,
.home-body .hero .hero-img-placeholder{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  z-index:0!important;
}
.home-body .hero .hero-container{
  position:relative!important;
  z-index:2!important;
}
.home-body .hero .sui-home-hero-overlay{
  background:transparent!important;
  box-shadow:none!important;
}

/* Mobile: keep the same treatment, but reveal more of the right side of the photo. */
@media(max-width:640px){
  .home-body .hero::before{
    background:linear-gradient(
      90deg,
      rgba(0,0,0,.97) 0%,
      rgba(0,0,0,.94) 40%,
      rgba(0,0,0,.80) 58%,
      rgba(0,0,0,.52) 74%,
      rgba(0,0,0,.18) 90%,
      rgba(0,0,0,0) 100%
    )!important;
  }
  .home-body .hero .sui-home-hero-overlay{
    max-width:92%!important;
    padding:24px 20px 36px!important;
  }
}


/* Robust home hero gradient: real DOM overlay layer */
.home-body .hero{
  position:relative!important;
  overflow:hidden!important;
}
.home-body .hero .hero-gradient-layer{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.96) 0%,
    rgba(0,0,0,.92) 32%,
    rgba(0,0,0,.78) 50%,
    rgba(0,0,0,.48) 67%,
    rgba(0,0,0,.16) 84%,
    rgba(0,0,0,0) 100%
  )!important;
}
.home-body .hero .hero-container{
  position:relative!important;
  z-index:2!important;
}
.home-body .hero .sui-home-hero-overlay,
.home-body .hero .hero-content{
  background:transparent!important;
  box-shadow:none!important;
}
@media(max-width:640px){
  .home-body .hero .hero-gradient-layer{
    background:linear-gradient(
      90deg,
      rgba(0,0,0,.98) 0%,
      rgba(0,0,0,.94) 38%,
      rgba(0,0,0,.80) 57%,
      rgba(0,0,0,.52) 73%,
      rgba(0,0,0,.18) 89%,
      rgba(0,0,0,0) 100%
    )!important;
  }
}


/* Mobile content gutters: keep text away from the viewport edges */
@media(max-width:640px){
  .container,
  .section-inner,
  .content-inner,
  .page-inner,
  .sui-section-inner{
    padding-left:20px!important;
    padding-right:20px!important;
    box-sizing:border-box!important;
  }

  /* Home section headings/body copy */
  .home-body section > h1,
  .home-body section > h2,
  .home-body section > h3,
  .home-body section > p{
    margin-left:20px!important;
    margin-right:20px!important;
  }

  /* Keep large section titles readable on narrow screens */
  .home-body h2{
    font-size:clamp(36px,11vw,56px)!important;
    line-height:1.06!important;
  }

  .home-body p{
    line-height:1.65!important;
  }
}


/* Mobile auto-hide header:
   - visible when scrolling back up
   - hidden while scrolling down
*/
@media(max-width:1180px){
  .sui-site-header,
  header.sui-header,
  .site-header{
    position:sticky!important;
    top:0!important;
    z-index:12000!important;
    transition:transform .28s ease!important;
    will-change:transform;
  }

  body.sui-header-hidden .sui-site-header,
  body.sui-header-hidden header.sui-header,
  body.sui-header-hidden .site-header{
    transform:translateY(-100%)!important;
  }
}


/* Member Login link */
.sui-login{
  white-space:nowrap;
}
.sui-mobile-panel .mobile-login{
  display:block;
}


/* Final belt icon sizing: cropped asset, visible artwork fills 48px box */
.karate-belt-icon{
  width:48px!important;
  height:48px!important;
  object-fit:contain!important;
  display:block!important;
  margin-left:auto!important;
  margin-right:auto!important;
}


/* Belt icon v2: new asset URL prevents stale browser cache */
.karate-belt-icon{
  width:48px!important;
  height:48px!important;
  object-fit:contain!important;
}


/* Curriculum typography: match the rest of KARATE ONLINE SUI */
.curriculum-page,
.curriculum-page h1,
.curriculum-page h2,
.curriculum-page h3,
.curriculum-page h4,
.curriculum-page p,
.curriculum-page span,
.curriculum-page div,
.curriculum-page a,
.curriculum-page button{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",Arial,sans-serif!important;
}


/* Unified desktop header typography */
@media(min-width:1181px){
  .sui-nav{
    font-size:16px!important;
    gap:16px!important;
    font-weight:650!important;
  }
  .sui-nav>a,
  .sui-nav button{
    font-size:16px!important;
    line-height:1.25!important;
  }
  .sui-start{
    padding:13px 20px!important;
  }
}


/* Final desktop header normalization.
   Contact is the visual reference; this overrides legacy page CSS. */
@media(min-width:1181px){
  .sui-site-header{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",Arial,sans-serif!important;
  }
  .sui-site-header .sui-topline{
    font-size:16px!important;
    line-height:1.35!important;
    padding:12px 18px!important;
  }
  .sui-site-header .sui-mainbar{
    display:flex!important;
    align-items:center!important;
    gap:16px!important;
    min-height:108px!important;
    padding:18px 2.4vw!important;
    box-sizing:border-box!important;
  }
  .sui-site-header .sui-brand{
    flex:0 1 410px!important;
    min-width:240px!important;
    max-width:410px!important;
    margin:0!important;
    padding:0!important;
  }
  .sui-site-header .sui-brand img{
    display:block!important;
    width:min(390px,100%)!important;
    max-width:390px!important;
    height:auto!important;
    margin:0!important;
  }
  .sui-site-header .sui-nav{
    margin-left:auto!important;
    display:flex!important;
    align-items:center!important;
    gap:16px!important;
    font-size:16px!important;
    font-weight:650!important;
    line-height:1.25!important;
    white-space:nowrap!important;
  }
  .sui-site-header .sui-nav>a,
  .sui-site-header .sui-nav button{
    font:inherit!important;
    font-size:16px!important;
    line-height:1.25!important;
    margin:0!important;
  }
  .sui-site-header .sui-start{
    padding:13px 20px!important;
  }
}


/* Header final lock:
   Prevent Bootstrap / legacy page CSS from changing the shared header. */
.sui-site-header,
.sui-site-header *{
  box-sizing:border-box!important;
}
@media(min-width:1181px){
  .sui-site-header .sui-mainbar{
    padding:18px 2.4vw!important;
    min-height:108px!important;
  }

  .sui-site-header .sui-brand{
    flex:0 0 390px!important;
    width:390px!important;
    min-width:390px!important;
    max-width:390px!important;
  }

  .sui-site-header .sui-brand img{
    width:390px!important;
    max-width:390px!important;
    height:auto!important;
  }

  .sui-site-header .sui-nav{
    flex:1 1 auto!important;
    margin-left:28px!important;
    justify-content:flex-end!important;
    gap:18px!important;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",Arial,sans-serif!important;
    font-size:18px!important;
    font-weight:700!important;
    line-height:1.25!important;
  }

  .sui-site-header .sui-nav > a,
  .sui-site-header .sui-nav > div > button,
  .sui-site-header .sui-nav > button{
    font-family:inherit!important;
    font-size:18px!important;
    font-weight:700!important;
    line-height:1.25!important;
    letter-spacing:0!important;
  }

  .sui-site-header .sui-start{
    padding:14px 22px!important;
  }

  .sui-site-header .sui-login{
    margin-left:2px!important;
  }
}


/* Shared header typography lock — all pages */
.sui-site-header{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",Arial,sans-serif!important;
}
.sui-site-header .sui-topline{
  font-family:inherit!important;
  font-size:20px!important;
  font-weight:500!important;
  line-height:1.35!important;
  letter-spacing:.01em!important;
}
@media(min-width:1181px){
  .sui-site-header .sui-nav{
    font-family:inherit!important;
    font-size:18px!important;
    font-weight:700!important;
    line-height:1.25!important;
  }
  .sui-site-header .sui-nav > a,
  .sui-site-header .sui-nav > div > button,
  .sui-site-header .sui-nav > button{
    font-family:inherit!important;
    font-size:18px!important;
    font-weight:700!important;
    line-height:1.25!important;
  }
}
@media(max-width:1180px){
  .sui-site-header .sui-topline{
    font-size:16px!important;
  }
}


/* Header overflow fix:
   switch to the mobile/hamburger header earlier on medium-width screens */
@media(max-width:1420px){
  .sui-site-header .sui-nav{
    display:none!important;
  }
  .sui-site-header .sui-mobile-toggle{
    display:flex!important;
  }
  .sui-site-header .sui-mainbar{
    padding:14px 20px!important;
  }
  .sui-site-header .sui-brand{
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:390px!important;
  }
  .sui-site-header .sui-brand img{
    width:min(390px,100%)!important;
    max-width:390px!important;
  }
  .sui-mobile-panel.open{
    display:block!important;
  }
}

/* Desktop nav only when there is enough horizontal space */
@media(min-width:1421px){
  .sui-site-header .sui-nav{
    display:flex!important;
  }
  .sui-site-header .sui-mobile-toggle{
    display:none!important;
  }
}


/* Responsive Kyu-to-Dan roadmap */
.rank-roadmap{
  margin:28px 0 24px;
}
.rank-roadmap-title{
  text-align:center;
  font-size:20px;
  font-weight:800;
  margin-bottom:20px;
  color:#173f52;
}
.rank-roadmap-desktop{
  display:flex;
  align-items:flex-start;
  position:relative;
  gap:0;
  padding:12px 8px 4px;
}
.rank-roadmap-desktop::before{
  content:"";
  position:absolute;
  left:4%;
  right:4%;
  top:24px;
  height:8px;
  border-radius:999px;
  background:#e5e9f2;
}
.rank-node{
  position:relative;
  z-index:1;
  flex:1 1 0;
  text-align:center;
  min-width:0;
}
.rank-dot{
  display:block;
  width:20px;
  height:20px;
  border-radius:50%;
  margin:2px auto 10px;
  background:#0866bd;
}
.rank-node.free .rank-dot{background:#0bb67a}
.rank-label{
  display:block;
  font-size:14px;
  line-height:1.25;
  font-weight:700;
  white-space:nowrap;
}
.rank-roadmap-mobile{display:none}

@media(max-width:640px){
  .rank-roadmap-title{
    font-size:18px;
    line-height:1.4;
    margin-bottom:18px;
  }
  .rank-roadmap-desktop{display:none}
  .rank-roadmap-mobile{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:repeat(6,74px);
    column-gap:70px;
    row-gap:18px;
    position:relative;
    padding:4px 8px 10px;
    align-items:center;
  }
  .rank-mobile-node{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:56px;
    padding:10px 8px;
    border:2px solid #0866bd;
    border-radius:14px;
    background:#fff;
    color:#103f61;
    font-size:17px;
    line-height:1.15;
    font-weight:800;
    text-align:center;
  }
  .rank-mobile-node.free{
    border-color:#0bb67a;
    color:#087a55;
    background:#f0fff9;
  }
  .rank-mobile-node.final{
    background:#0866bd;
    color:#fff;
  }
  .rank-mobile-arrow{
    z-index:1;
    align-self:center;
    justify-self:center;
    color:#0866bd;
    font-size:34px;
    font-weight:800;
    line-height:1;
    pointer-events:none;
  }
  .rank-mobile-arrow.right,
  .rank-mobile-arrow.left{
    width:100%;
    text-align:center;
  }
  .rank-mobile-arrow.down{
    align-self:end;
    transform:translateY(22px);
  }
}

/* Delayed YouTube preload: player sits in the same 16:9 slot as the thumbnail. */
.youtube-preloaded-player{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border:0;
  background:#000;
}
.youtube-preloaded-player[hidden]{
  display:none!important;
}


/* Final mobile roadmap snake layout */
@media(max-width:640px){
  .rank-roadmap-mobile{
    display:block!important;
    padding:6px 8px 12px!important;
  }
  .rank-snake-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);
    align-items:center;
    gap:8px;
  }
  .rank-mobile-node{
    min-height:64px!important;
    padding:10px 8px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:2px solid #0866bd!important;
    border-radius:14px!important;
    background:#fff!important;
    color:#103f61!important;
    font-size:17px!important;
    line-height:1.15!important;
    font-weight:800!important;
    text-align:center!important;
  }
  .rank-mobile-node.free{
    border-color:#0bb67a!important;
    color:#087a55!important;
    background:#f0fff9!important;
  }
  .rank-mobile-node.final{
    background:#0866bd!important;
    color:#fff!important;
  }
  .rank-mobile-spacer{min-height:64px}
  .rank-row-arrow{
    text-align:center;
    font-size:34px;
    line-height:1;
    color:#0866bd;
    font-weight:800;
  }
  .rank-row-arrow.empty{visibility:hidden}
  .rank-down-arrow{
    width:calc((100% - 68px)/2);
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    line-height:1;
    color:#0866bd;
    font-weight:800;
  }
  .rank-down-arrow.left{margin-right:auto}
  .rank-down-arrow.right{margin-left:auto}
}


/* Enlarge karate belt icon */
.karate-belt-icon{
  width:72px!important;
  height:72px!important;
  object-fit:contain!important;
}


/* === 2026-09-17 unified Beginner hero ===
   Match the Experienced-page white title panel in every language. */
.beginner-hero-tight .hero-image-wrap{
  position:relative!important;
}
.beginner-hero-tight .beginner-hero-title{
  position:absolute!important;
  left:clamp(22px,5vw,76px)!important;
  top:50%!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  width:auto!important;
  max-width:min(680px,82%)!important;
  padding:22px 30px!important;
  margin:0!important;
  background:#fff!important;
  color:#111!important;
  box-shadow:none!important;
  border-radius:0!important;
  letter-spacing:0!important;
  z-index:3!important;
}
.beginner-hero-tight .beginner-hero-title h1{
  margin:0!important;
  color:#111!important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",Arial,sans-serif!important;
  font-size:clamp(34px,4.4vw,58px)!important;
  font-weight:800!important;
  line-height:1.08!important;
  letter-spacing:0!important;
}
@media(max-width:640px){
  .beginner-hero-tight .beginner-hero-title{
    left:18px!important;
    max-width:calc(100% - 36px)!important;
    padding:15px 18px!important;
  }
  .beginner-hero-tight .beginner-hero-title h1{
    font-size:clamp(27px,8vw,38px)!important;
    line-height:1.12!important;
  }
}

/* === Mobile language selector outside hamburger === */
.sui-mobile-lang{
  display:none;
}
@media(max-width:1420px){
  .sui-site-header .sui-mobile-lang{
    display:block!important;
    position:relative!important;
    flex:0 0 auto!important;
    margin-left:auto!important;
    margin-right:10px!important;
  }
  .sui-site-header .sui-mobile-lang > button{
    min-width:58px!important;
    height:44px!important;
    padding:0 12px!important;
    border:1px solid rgba(255,255,255,.72)!important;
    border-radius:8px!important;
    background:rgba(255,255,255,.10)!important;
    color:#fff!important;
    font-family:inherit!important;
    font-size:15px!important;
    font-weight:800!important;
    line-height:1!important;
    cursor:pointer!important;
    white-space:nowrap!important;
  }
  .sui-site-header .sui-mobile-lang .sui-lang-menu{
    position:absolute!important;
    top:calc(100% + 9px)!important;
    right:0!important;
    left:auto!important;
    z-index:15050!important;
    min-width:164px!important;
    padding:8px!important;
    background:#fff!important;
    border:1px solid #e2e2e2!important;
    border-radius:9px!important;
    box-shadow:0 14px 36px rgba(0,0,0,.22)!important;
  }
  .sui-site-header .sui-mobile-lang .sui-lang-menu a{
    display:block!important;
    padding:11px 12px!important;
    border-radius:6px!important;
    color:#222!important;
    text-decoration:none!important;
    font-size:16px!important;
    font-weight:650!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }
  .sui-site-header .sui-mobile-lang .sui-lang-menu a.active{
    background:#fff2e8!important;
    color:#b44a00!important;
  }
  .sui-site-header .sui-mobile-lang .sui-lang-menu a:hover{
    background:#f3f4f6!important;
  }
  .sui-site-header .sui-mobile-toggle{
    flex:0 0 auto!important;
    margin-left:0!important;
  }
}
@media(min-width:1421px){
  .sui-site-header .sui-mobile-lang{
    display:none!important;
  }
}