:root{
    --freee: #3567F5;
    --freee-deep: #1744C7;
    --freee-dark: #0a1a5c;
    --ink: #0a1530;
    --ink-soft: #3a445e;
    --muted: #7a8199;
    --paper: #fbfaff;
    --paper-2: #eef1fc;
    --white: #ffffff;
    --accent: #ffd63d;
    --pink: #ff7ea8;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{
    font-family:"M PLUS Rounded 1c","Zen Kaku Gothic New", system-ui, sans-serif;
    color:var(--ink);
    background:var(--paper);
    font-weight:700;
    line-height:1.85;
    -webkit-font-smoothing:antialiased;
    font-feature-settings:"palt" 1;
    overflow-x:hidden;
  }
  a{ color:inherit; }
  .wrap{ max-width:1200px; margin:0 auto; padding:0 24px; }
  .wrap-narrow{ max-width:900px; margin:0 auto; padding:0 24px; }

  /* ========================= FREEE LOGO ========================= */
  .freee-logo{
    display:inline-flex; align-items:center; gap:8px;
    font-family:"Fredoka", sans-serif;
    font-weight:600;
    color:var(--freee-dark);
    letter-spacing:-.02em;
    line-height:1;
  }
  .freee-logo-mark{
    display:inline-block;
    width:1.05em; height:1.05em;
    background:var(--freee);
    border-radius:28% 12% 28% 12%;
    transform: rotate(-8deg);
    position:relative;
    box-shadow: inset -2px -3px 0 rgba(0,0,0,.12);
  }
  .freee-logo-mark::before{
    content:""; position:absolute;
    left:22%; top:30%;
    width:56%; height:14%;
    background:var(--white); border-radius:2px;
  }
  .freee-logo-mark::after{
    content:""; position:absolute;
    left:22%; top:55%;
    width:40%; height:14%;
    background:var(--white); border-radius:2px;
  }
  .freee-logo-text{
    font-family:"Fredoka", sans-serif;
    font-weight:600; font-size:1em; color:inherit;
  }
  .freee-logo.inv .freee-logo-mark{ background:var(--white); }
  .freee-logo.inv .freee-logo-mark::before,
  .freee-logo.inv .freee-logo-mark::after{ background:var(--freee); }
  .freee-logo.inv{ color:var(--white); }

  /* ========================= NAV ========================= */
  nav{
    position:sticky; top:0; z-index:30;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(12px);
    border-bottom:3px solid var(--ink);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    height:68px;
  }
  .nav-logo img{ height:28px; display:block; }
  .nav-links{ display:flex; gap:28px; align-items:center; }
  .nav-links a{ font-size:13px; text-decoration:none; color:var(--ink); }
  .nav-links a:hover{ color:var(--freee); }
  .nav-links a.nav-cta{
    font-size:13px; padding:10px 20px;
    background:var(--ink); color:var(--white) !important;
    border-radius:999px; border:3px solid var(--ink);
    box-shadow: 3px 4px 0 var(--freee);
    font-weight:900;
  }
  .nav-links a.nav-cta:hover{ color:var(--white) !important; background:var(--freee); }
  @media(max-width:720px){
    .nav-links a:not(.nav-cta){ display:none; }
    .nav-links a.nav-cta{ font-size:11px; padding:7px 14px; }
  }

  /* ========================= HERO ========================= */
  .hero{
    position:relative;
    min-height:80vh;
    padding:40px 24px 120px;
    background:var(--freee);
    color:var(--white);
    overflow:hidden;
  }
  .hero-inner{
    max-width:1200px; margin:0 auto;
    position:relative; z-index:3;
    padding-top:64px; text-align:center;
  }
  .hero-badge{
    display:inline-block;
    font-size:11px; letter-spacing:.22em;
    padding:7px 22px;
    background:var(--white); color:var(--freee-dark);
    border-radius:999px;
    margin-bottom:32px;
    font-family:"JetBrains Mono", monospace;
    font-weight:700;
    animation:fadeUp .8s ease both;
  }
  h1.hero-h{
    font-family:"M PLUS Rounded 1c", sans-serif;
    font-weight:900;
    font-size:clamp(44px, 7vw, 96px);
    line-height:1.12;
    letter-spacing:-.01em;
    color:var(--white);
    animation:fadeUp 1s .1s ease both;
  }
  h1.hero-h .line{ display:block; }
  h1.hero-h em{
    font-style:normal;
    color:var(--accent);
  }
  .hero-sub{
    margin:36px auto 0;
    font-size:clamp(15px, 1.55vw, 19px);
    font-weight:700;
    max-width:680px;
    line-height:2;
    color:rgba(255,255,255,.94);
    animation:fadeUp 1s .3s ease both;
  }
  .hero-sub .mark{
    background:linear-gradient(transparent 60%, rgba(255,214,61,.45) 60%);
    padding:0 2px;
  }

  /* logo strip in hero */
  .hero-logos{
    margin-top:40px;
    display:flex; justify-content:center; gap:20px; align-items:center;
    flex-wrap:wrap;
    animation:fadeUp 1s .4s ease both;
  }
  .hero-logos img{ height:28px; opacity:.9; }
  .hero-logos .sep{ width:1px; height:20px; background:rgba(255,255,255,.4); }

  /* CTA buttons */
  .hero-cta-wrap{
    position:relative; display:flex; gap:20px;
    justify-content:center; flex-wrap:wrap;
    margin-top:40px;
    animation:fadeUp 1s .5s ease both;
  }
  .btn{
    position:relative; display:inline-flex; align-items:center; gap:12px;
    padding:22px 48px; font-size:20px; font-weight:900;
    letter-spacing:.04em; text-decoration:none;
    border:3px solid var(--ink);
    border-radius:999px;
    transition: transform .15s, box-shadow .15s;
    font-family:"M PLUS Rounded 1c";
  }
  .btn svg{ width:18px; height:18px; }
  .btn-primary{
    background:var(--white); color:var(--freee-dark);
    box-shadow: 0 8px 0 var(--ink);
  }
  .btn-primary:hover{ transform:translateY(4px); box-shadow:0 4px 0 var(--ink); }
  .btn-secondary{
    background:transparent; color:var(--white);
    border-color:var(--white);
    box-shadow: 0 8px 0 rgba(255,255,255,.25);
  }
  .btn-secondary:hover{ transform:translateY(4px); box-shadow:0 4px 0 rgba(255,255,255,.25); }

  .hero-cta-hint{
    margin-top:22px;
    font-size:12px; font-weight:700;
    color:rgba(255,255,255,.8);
    display:flex; align-items:center; justify-content:center; gap:10px;
  }
  .hero-cta-hint::before, .hero-cta-hint::after{
    content:""; height:1px; width:30px;
    background:rgba(255,255,255,.4);
  }

  /* decorations */
  .deco-plus{
    width:28px; height:28px;
    position:absolute; z-index:1;
    animation: spin 10s linear infinite;
  }
  .deco-plus::before, .deco-plus::after{
    content:""; position:absolute;
    background:var(--white); border-radius:3px;
  }
  .deco-plus::before{ left:50%; top:0; width:7px; height:100%; transform:translateX(-50%); }
  .deco-plus::after{ top:50%; left:0; width:100%; height:7px; transform:translateY(-50%); }
  .deco-plus.dark::before, .deco-plus.dark::after{ background:var(--ink); }

  .deco-striped{
    width:66px; height:66px; border-radius:50%;
    background: repeating-linear-gradient(135deg, var(--white) 0 6px, transparent 6px 14px);
    border:3px solid var(--white);
    position:absolute; z-index:1;
    animation: floaty 5s ease-in-out infinite;
  }
  .deco-dotted{
    width:64px; height:64px; border-radius:50%;
    border: 4px dotted var(--white);
    position:absolute; z-index:1;
    animation: spin 18s linear infinite;
  }
  .deco-square{
    width:42px; height:42px; background:var(--accent);
    position:absolute; z-index:1;
    animation: spin 14s linear infinite;
  }
  .deco-square.hollow{ background:transparent; border:5px solid var(--white); }
  .deco-torus{
    width:34px; height:34px; border-radius:50%;
    border:9px solid var(--accent); outline:3px solid var(--white);
    position:absolute; z-index:1;
    animation: floaty 3.5s ease-in-out .3s infinite;
  }
  .deco-dot{
    width:18px; height:18px; background:var(--white); border-radius:50%;
    position:absolute; z-index:1;
    animation: floaty 4s ease-in-out 1s infinite;
  }
  .deco-line{
    width:44px; height:7px; background:var(--accent);
    border-radius:4px; position:absolute; z-index:1;
    animation: floaty 5s ease-in-out .5s infinite;
  }
  .deco-pink{ background:var(--pink) !important; }

  /* step indicator */
  .steps{
    position:relative; z-index:3;
    margin-top:52px; padding:0 16px;
    display:flex; justify-content:center; gap:14px; flex-wrap:wrap;
    animation:fadeUp 1s .7s ease both;
  }
  .step-chip{
    display:flex; align-items:center; gap:12px;
    background:var(--white); color:var(--ink);
    padding:13px 22px 13px 14px;
    border:3px solid var(--ink);
    border-radius:999px;
    font-size:13px; font-weight:900;
    box-shadow: 4px 5px 0 var(--ink);
  }
  .step-num{
    width:28px; height:28px;
    background:var(--freee); color:var(--white);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:13px; font-family:"M PLUS Rounded 1c";
  }
  .step-arrow{ font-size:22px; font-weight:900; color:var(--white); align-self:center; }
  @media(max-width:540px){
    .steps{ flex-direction:column; align-items:center; gap:10px; }
    .step-chip{ width:260px; justify-content:center; }
    .step-arrow{ transform:rotate(90deg); }
  }

  .wave{
    position:absolute; left:0; right:0; bottom:-1px;
    width:100%; height:60px; z-index:2;
  }

  /* ========================= SECTIONS (shared) ========================= */
  section.block{ padding:120px 0; position:relative; }
  @media(max-width:900px){ section.block{ padding:80px 0; } }

  .sec-number{
    display:inline-block;
    font-family:"JetBrains Mono", monospace; font-weight:700;
    font-size:12px; letter-spacing:.16em; color:var(--freee);
    padding:6px 18px; background:var(--paper-2);
    border-radius:999px; margin-bottom:24px;
  }
  .sec-title{
    font-family:"M PLUS Rounded 1c"; font-weight:900;
    font-size:clamp(28px, 4vw, 48px);
    line-height:1.3; letter-spacing:-.005em;
    margin-bottom:24px;
  }
  .sec-title em{
    font-style:normal;
    position:relative; display:inline-block;
  }
  .sec-title em::after{
    content:""; position:absolute; left:-4px; right:-4px; bottom:6px;
    height:14px; background:var(--accent); z-index:-1; border-radius:4px;
  }
  .sec-lead{
    font-size:16px; line-height:2; font-weight:500;
    max-width:720px; color:var(--ink-soft);
  }
  .sec-head{ text-align:center; margin-bottom:80px; }
  .sec-head .sec-lead{ margin-left:auto; margin-right:auto; }

  /* ========================= PHASES ========================= */
  .phases{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:28px;
  }
  @media(max-width:720px){ .phases{ grid-template-columns:1fr; } }
  .phase-card{
    position:relative;
    background:var(--white);
    border:3px solid var(--ink);
    border-radius:24px;
    padding:36px 32px;
    box-shadow: 8px 8px 0 var(--ink);
    transition: transform .2s;
  }
  .phase-card:hover{ transform: translate(-4px, -4px); box-shadow: 12px 12px 0 var(--ink); }
  .phase-tag{
    position:absolute; top:-14px; left:24px;
    padding:6px 16px;
    background:var(--freee); color:var(--white);
    border:3px solid var(--ink);
    border-radius:999px;
    font-size:11px; font-weight:900; letter-spacing:.12em;
    font-family:"JetBrains Mono", monospace;
  }
  .phase-card:nth-child(2) .phase-tag{ background:var(--accent); color:var(--ink); }
  .phase-card:nth-child(3) .phase-tag{ background:var(--pink); color:var(--white); }
  .phase-card:nth-child(4) .phase-tag{ background:var(--ink); color:var(--white); }
  .phase-title{
    font-family:"M PLUS Rounded 1c"; font-weight:900;
    font-size:24px; line-height:1.4; margin:16px 0 16px;
  }
  .phase-body{ font-size:14px; line-height:2; color:var(--ink-soft); }
  .phase-meta{
    margin-top:20px; padding-top:18px;
    border-top:2px dashed var(--paper-2);
    display:flex; gap:20px; flex-wrap:wrap;
    font-size:12px; color:var(--muted);
  }
  .phase-meta b{
    color:var(--freee); font-weight:900; margin-right:6px;
    font-family:"JetBrains Mono", monospace;
  }

  /* ========================= CURRICULUM ========================= */
  .lessons{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
  }
  @media(max-width:900px){ .lessons{ grid-template-columns:repeat(2, 1fr); } }
  @media(max-width:520px){ .lessons{ grid-template-columns:1fr; } }
  .lesson{
    background:var(--white);
    border:3px solid var(--ink);
    border-radius:16px;
    padding:20px 20px 18px;
    display:flex; flex-direction:column;
    box-shadow: 4px 5px 0 var(--ink);
  }
  .lesson-num{
    font-family:"JetBrains Mono", monospace; font-weight:700;
    font-size:13px; color:var(--freee); letter-spacing:.08em;
    margin-bottom:8px;
  }
  .lesson-title{
    font-family:"M PLUS Rounded 1c"; font-weight:900;
    font-size:14px; line-height:1.55; flex:1; color:var(--ink);
  }
  .lesson-tag{
    display:inline-block; align-self:flex-start;
    margin-top:14px; font-size:11px; font-weight:900;
    padding:4px 12px; border-radius:999px;
    background:var(--paper-2); color:var(--freee-deep);
    font-family:"JetBrains Mono", monospace; letter-spacing:.04em;
  }
  .lesson-tag.basic{ background:#fff1b3; color:#8a6d00; }
  .lesson-tag.auto{ background:#d0e7ff; color:var(--freee-deep); }
  .lesson-tag.automation{ background:#ffdfe9; color:#c32864; }
  .lesson-tag.invoice{ background:#d9f7e0; color:#1a7a3d; }
  .lesson-tag.trx{ background:#ede0ff; color:#5d3fcc; }
  .lesson-tag.report{ background:#ffe4c7; color:#b35b00; }
  .lesson-tag.applied{ background:var(--ink); color:var(--accent); }

  /* ========================= VIDEO ========================= */
  .video-wrap{
    max-width:720px; margin:0 auto; overflow:hidden;
    border:3px solid var(--ink); border-radius:20px;
    box-shadow: 8px 8px 0 var(--ink);
  }
  .video-wrap video{ width:100%; display:block; background:#000; }
  .video-caption{
    padding:20px 24px; background:var(--white);
    font-size:14px; color:var(--ink-soft); line-height:1.7;
  }
  .video-caption strong{ color:var(--ink); display:block; margin-bottom:4px; }

  /* ========================= VIRTUAL SCHEDULE ========================= */
  .sch-wrap{
    background:var(--paper-2);
    border:3px solid var(--ink); border-radius:24px;
    padding:36px 32px;
    margin-bottom:28px;
    box-shadow: 8px 8px 0 var(--ink);
  }
  .sch-day{
    display:inline-block; font-family:"M PLUS Rounded 1c";
    font-weight:900; font-size:15px;
    padding:6px 18px; border-radius:999px;
    background:var(--freee); color:var(--white);
    margin-bottom:20px;
    box-shadow: 3px 3px 0 var(--ink);
  }
  .sch-wrap:nth-of-type(2) .sch-day{ background:var(--pink); }
  .sch-title{
    font-family:"M PLUS Rounded 1c"; font-weight:900;
    font-size:22px; margin-bottom:24px;
  }
  .sch-table{ width:100%; border-collapse:separate; border-spacing:0; }
  .sch-table th{
    text-align:left; padding:10px 12px;
    font-family:"JetBrains Mono", monospace;
    font-size:11px; letter-spacing:.08em; color:var(--muted);
    border-bottom:3px solid var(--ink);
  }
  .sch-table td{
    padding:14px 12px;
    vertical-align:top;
    border-bottom:1px dashed var(--ink);
    font-size:13px; line-height:1.8;
  }
  .sch-table td.time{
    font-family:"JetBrains Mono", monospace;
    font-weight:700; white-space:nowrap; color:var(--freee);
  }
  .sch-table td.topic{ font-weight:900; color:var(--ink); }
  .sch-table td.detail{ color:var(--ink-soft); }
  @media(max-width:720px){
    .sch-table td, .sch-table th{ font-size:11px; padding:10px 6px; }
  }

  /* full program */
  .fp-grid{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:12px;
    margin-top:40px;
  }
  @media(max-width:720px){ .fp-grid{ grid-template-columns:1fr; } }
  .fp-item{
    background:var(--white); border:3px solid var(--ink);
    border-radius:14px; padding:16px 20px;
    display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center;
    box-shadow: 3px 4px 0 var(--ink);
  }
  .fp-num{
    font-family:"JetBrains Mono", monospace; font-weight:700;
    font-size:13px; color:var(--freee); width:32px;
  }
  .fp-ttl{ font-size:13px; font-weight:900; line-height:1.5; }
  .fp-ttl small{ display:block; font-size:11px; color:var(--muted); margin-top:4px; font-weight:700; }
  .fp-time{
    font-family:"JetBrains Mono", monospace; font-weight:700;
    font-size:11px; color:var(--muted); white-space:nowrap;
    padding:4px 10px; background:var(--paper-2); border-radius:999px;
  }
  .fp-cat{
    margin-top:32px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  }
  .fp-cat-chip{
    padding:8px 18px; border-radius:999px;
    background:var(--white); border:3px solid var(--ink);
    font-size:12px; font-weight:900;
    box-shadow: 3px 4px 0 var(--ink);
  }
  .fp-cat-chip b{
    color:var(--freee); font-family:"JetBrains Mono", monospace;
    margin-left:6px; font-size:14px;
  }

  /* how it works */
  .hiw{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
    margin-top:52px;
  }
  @media(max-width:820px){ .hiw{ grid-template-columns:1fr; } }
  .hiw-card{
    background:var(--white); border:3px solid var(--ink); border-radius:20px;
    padding:28px 24px 26px;
    box-shadow: 6px 6px 0 var(--ink);
  }
  .hiw-num{
    display:inline-block;
    width:42px; height:42px;
    background:var(--accent); color:var(--ink);
    border:3px solid var(--ink); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:"M PLUS Rounded 1c"; font-weight:900; font-size:18px;
    margin-bottom:14px;
  }
  .hiw-ttl{ font-size:17px; font-weight:900; margin-bottom:10px; line-height:1.5; }
  .hiw-body{ font-size:13px; color:var(--ink-soft); line-height:1.9; }

  /* ========================= INSTRUCTORS ========================= */
  .ins-sec{ background:var(--paper-2); }
  .instructors{
    display:grid; grid-template-columns:1fr 1fr; gap:32px;
  }
  @media(max-width:820px){ .instructors{ grid-template-columns:1fr; } }
  .ins-card{
    background:var(--white); border:3px solid var(--ink);
    border-radius:24px; padding:40px 32px 36px;
    box-shadow: 8px 8px 0 var(--ink);
    position:relative;
  }
  .ins-card img{
    width:110px; height:110px; object-fit:cover;
    background:var(--accent); border:3px solid var(--ink);
    border-radius:50%; padding:4px;
    margin-bottom:20px;
  }
  .ins-card:nth-child(2) img{ background:var(--pink); }
  .ins-name{
    font-family:"M PLUS Rounded 1c"; font-weight:900;
    font-size:24px; margin-bottom:6px;
  }
  .ins-role{
    font-family:"JetBrains Mono", monospace; font-weight:700;
    font-size:11px; letter-spacing:.14em;
    color:var(--freee); margin-bottom:20px;
  }
  .ins-career{ font-size:14px; color:var(--ink-soft); line-height:1.95; margin-bottom:16px; }
  .ins-bio{ font-size:13px; color:var(--ink-soft); line-height:1.9; padding-top:16px; border-top:2px dashed var(--paper-2); }
  .ins-qual{
    margin-top:16px; padding:14px 16px;
    background:var(--paper-2); border-radius:12px;
    font-size:12px; font-weight:700;
  }
  .ins-qual ul{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
  .ins-qual li{
    padding:4px 12px; background:var(--white); border:2px solid var(--ink);
    border-radius:999px; font-size:11px; font-weight:900;
  }

  /* ========================= VOICES ========================= */
  .case{
    background:linear-gradient(135deg, var(--accent) 0%, #ffe87a 100%);
    border:3px solid var(--ink); border-radius:24px;
    padding:32px 32px;
    box-shadow: 8px 8px 0 var(--ink);
    margin-bottom:40px;
    position:relative;
  }
  .case::before{ display:none; }
  .case-top{
    display:flex; gap:16px; align-items:center;
    margin-bottom:20px;
    padding-bottom:16px;
    border-bottom:2px solid var(--ink);
  }
  .case-avatar{
    width:80px; height:80px; border-radius:50%; overflow:hidden;
    border:3px solid var(--ink); flex-shrink:0;
  }
  .case-avatar img{
    width:100%; height:100%; object-fit:cover; object-position:center top;
  }
  .case-name{ font-weight:900; font-size:18px; }
  .case-meta{ font-size:12px; font-weight:700; color:var(--ink-soft); }
  .case-ttl{
    font-family:"M PLUS Rounded 1c"; font-weight:900;
    font-size:20px; line-height:1.5; margin-bottom:14px;
  }
  .case-body{ font-size:14px; line-height:2; color:var(--ink); }
  .case-result{
    margin-top:18px; padding:16px 20px;
    background:rgba(0,102,255,.06); border-left:4px solid var(--freee);
    border-radius:8px; font-size:13px; line-height:1.9;
  }
  .case-result span{
    display:inline-block; font-weight:900; font-size:11px;
    padding:2px 10px; border-radius:999px; margin-right:6px;
    background:var(--ink); color:var(--white);
  }
  .case-by{
    margin-top:16px; font-size:12px; font-weight:700;
    text-align:right; color:var(--ink-soft);
  }

  .voices{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:24px;
  }
  @media(max-width:720px){ .voices{ grid-template-columns:1fr; } }
  .voice{
    position:relative;
    background:var(--white);
    border:3px solid var(--ink);
    border-radius:20px;
    padding:28px 28px 24px;
    box-shadow: 6px 6px 0 var(--ink);
  }
  .voice-who{
    display:flex; gap:12px; align-items:center;
    margin-bottom:16px; padding-bottom:14px;
    border-bottom:2px dashed var(--paper-2);
  }
  .voice-dot{
    width:44px; height:44px; border-radius:50%;
    background:var(--freee); color:var(--white);
    display:flex; align-items:center; justify-content:center;
    font-size:15px; font-weight:900; flex-shrink:0;
  }
  .voice:nth-child(2) .voice-dot{ background:var(--pink); }
  .voice-profile{ font-size:12px; font-weight:700; color:var(--ink-soft); }
  .voice-body{ font-size:13px; line-height:2; color:var(--ink-soft); }

  /* ========================= CASE DETAIL (Before/After) ========================= */
  .case-detail{
    background:var(--white);
    border:3px solid var(--ink);
    border-radius:24px;
    padding:40px 36px;
    box-shadow: 8px 8px 0 var(--ink);
    margin-bottom:40px;
  }
  .case-detail-header{
    display:flex; gap:16px; align-items:center;
    margin-bottom:24px;
    padding-bottom:18px;
    border-bottom:2px solid var(--ink);
  }
  .case-detail-avatar{ flex-shrink:0; }
  .case-detail-name{
    font-family:"M PLUS Rounded 1c"; font-weight:900;
    font-size:20px; margin-bottom:4px;
  }
  .case-detail-tag{
    font-family:"JetBrains Mono", monospace; font-weight:700;
    font-size:11px; letter-spacing:.08em; color:var(--freee);
  }
  .case-detail-ttl{
    font-family:"M PLUS Rounded 1c"; font-weight:900;
    font-size:22px; line-height:1.5; margin-bottom:16px;
  }
  .case-detail-body{
    font-size:14px; line-height:2; color:var(--ink-soft);
    margin-bottom:32px;
  }

  /* Before → After メトリクス */
  .ba-metrics{ margin-bottom:32px; }
  .ba-metric{
    background:var(--paper-2);
    border:3px solid var(--ink);
    border-radius:20px;
    padding:28px 32px;
    box-shadow: 4px 4px 0 var(--ink);
  }
  .ba-metric-label{
    font-family:"JetBrains Mono", monospace; font-weight:700;
    font-size:11px; letter-spacing:.14em; color:var(--muted);
    margin-bottom:16px; text-align:center;
  }
  .ba-metric-row{
    display:flex; align-items:center; justify-content:center;
    gap:24px; flex-wrap:wrap;
  }
  .ba-before, .ba-after{
    text-align:center; min-width:140px;
    padding:20px 24px;
    border-radius:16px;
    border:3px solid var(--ink);
  }
  .ba-before{
    background:var(--white);
  }
  .ba-after{
    background:linear-gradient(135deg, var(--accent) 0%, #ffe87a 100%);
  }
  .ba-tag{
    display:inline-block; font-weight:900; font-size:11px;
    padding:3px 12px; border-radius:999px; margin-bottom:8px;
    font-family:"JetBrains Mono", monospace; letter-spacing:.06em;
  }
  .ba-tag.before{ background:var(--ink); color:var(--white); }
  .ba-tag.after{ background:var(--freee); color:var(--white); }
  .ba-value{
    font-family:"M PLUS Rounded 1c"; font-weight:900;
    font-size:36px; line-height:1.2; color:var(--ink);
  }
  .ba-value small{
    font-size:16px; font-weight:900;
  }
  .ba-note{
    font-size:12px; color:var(--ink-soft); margin-top:6px;
    font-weight:700;
  }
  .ba-arrow{
    font-size:32px; font-weight:900; color:var(--freee);
    flex-shrink:0;
  }
  .ba-uplabel{
    text-align:center; margin-top:16px;
    font-family:"M PLUS Rounded 1c"; font-weight:900;
    font-size:16px; color:var(--freee-deep);
    padding:6px 18px;
    background:var(--white);
    border:2px solid var(--freee);
    border-radius:999px;
    display:inline-block;
    width:100%; max-width:260px;
    margin-left:auto; margin-right:auto;
    display:block; margin-left:auto; margin-right:auto;
  }

  /* ○× スキル比較表 */
  .ba-table-wrap{
    margin-bottom:28px;
  }
  .ba-table-title{
    font-family:"M PLUS Rounded 1c"; font-weight:900;
    font-size:16px; margin-bottom:14px;
    padding-left:4px;
  }
  .ba-table{
    width:100%; border-collapse:separate; border-spacing:0;
    border:3px solid var(--ink); border-radius:16px;
    overflow:hidden;
    box-shadow: 4px 4px 0 var(--ink);
  }
  .ba-table thead th{
    background:var(--ink); color:var(--white);
    padding:12px 16px;
    font-family:"JetBrains Mono", monospace; font-weight:700;
    font-size:12px; letter-spacing:.06em;
    text-align:center;
  }
  .ba-table thead th:first-child{
    text-align:left; width:auto;
  }
  .ba-table thead th:nth-child(2),
  .ba-table thead th:nth-child(3){
    width:90px;
  }
  .ba-table tbody td{
    padding:12px 16px;
    font-size:13px; font-weight:700;
    border-bottom:1px solid var(--paper-2);
    background:var(--white);
  }
  .ba-table tbody tr:last-child td{ border-bottom:none; }
  .ba-table tbody td:nth-child(2),
  .ba-table tbody td:nth-child(3){
    text-align:center; font-size:18px; font-weight:900;
  }
  .ba-table tbody td.ok{
    color:var(--freee); background:rgba(53,103,245,.06);
  }
  .ba-table tbody td.ng{
    color:#ccc;
  }
  .ba-table tbody td.partial{
    color:var(--pink);
  }
  @media(max-width:520px){
    .ba-table thead th,
    .ba-table tbody td{ padding:10px 10px; font-size:12px; }
    .ba-table thead th:nth-child(2),
    .ba-table thead th:nth-child(3){ width:60px; }
  }

  /* case-detail の result（まとめ） */
  .case-detail-result{
    padding:18px 22px;
    background:rgba(53,103,245,.06);
    border-left:4px solid var(--freee);
    border-radius:8px;
    font-size:13px; line-height:2;
  }
  .case-detail-result .ba-tag{
    margin-bottom:0; margin-right:6px; vertical-align:middle;
  }

  @media(max-width:640px){
    .case-detail{ padding:28px 20px; }
    .ba-metric{ padding:20px 16px; }
    .ba-value{ font-size:28px; }
    .ba-before, .ba-after{ min-width:110px; padding:14px 16px; }
    .ba-arrow{ font-size:24px; }
  }

  /* ========================= FLOW ========================= */
  .flow-sec{
    background:var(--freee); color:var(--white);
    position:relative; overflow:hidden;
  }
  .flow-sec .sec-number{ background:rgba(255,255,255,.2); color:var(--white); }
  .flow-sec .sec-title{ color:var(--white); }
  .flow-sec .sec-title em::after{ background:var(--accent); }
  .flow-sec .sec-lead{ color:rgba(255,255,255,.85); }

  .flow-list{
    display:grid; grid-template-columns:repeat(5, 1fr); gap:16px;
    position:relative; z-index:2;
  }
  @media(max-width:900px){ .flow-list{ grid-template-columns:repeat(2, 1fr); } }
  @media(max-width:540px){ .flow-list{ grid-template-columns:1fr; } }
  .flow-item{
    background:var(--white); color:var(--ink);
    border:3px solid var(--ink);
    border-radius:20px;
    padding:24px 20px;
    box-shadow: 6px 6px 0 var(--ink);
    position:relative;
  }
  .flow-badge{
    position:absolute; top:-14px; right:-14px;
    width:44px; height:44px;
    background:var(--accent); color:var(--ink);
    border:3px solid var(--ink); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-weight:900; font-size:14px;
    font-family:"JetBrains Mono", monospace;
    box-shadow: 3px 4px 0 var(--ink);
  }
  .flow-ttl{
    font-family:"M PLUS Rounded 1c"; font-weight:900;
    font-size:16px; line-height:1.5; margin-bottom:12px; margin-top:8px;
  }
  .flow-text{ font-size:12px; line-height:1.85; color:var(--ink-soft); }

  /* ========================= CERTIFICATION ========================= */
  .cert-sec{ background:var(--paper-2); }
  .cert-inner{
    max-width:820px; margin:0 auto; text-align:center;
  }
  .cert-logo{
    width:160px; margin:0 auto 32px; display:block;
  }
  .cert-badge-prep{
    display:inline-block; font-family:"JetBrains Mono", monospace;
    font-weight:700; font-size:11px; letter-spacing:.14em;
    padding:6px 18px; background:var(--pink); color:var(--white);
    border-radius:999px; margin-bottom:20px;
  }
  .cert-desc{
    font-size:14px; line-height:2; color:var(--ink-soft);
    max-width:640px; margin:0 auto 40px; text-align:left;
  }
  .cert-tiers{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
    margin-bottom:40px;
  }
  @media(max-width:720px){ .cert-tiers{ grid-template-columns:1fr; } }
  .cert-tier{
    background:var(--white); border:3px solid var(--ink);
    border-radius:20px; padding:28px 22px;
    box-shadow: 5px 5px 0 var(--ink);
    text-align:center;
  }
  .cert-tier-rank{
    font-family:"JetBrains Mono", monospace; font-weight:700;
    font-size:13px; letter-spacing:.1em;
    padding:5px 16px; border-radius:999px;
    display:inline-block; margin-bottom:14px;
  }
  .cert-tier:nth-child(1) .cert-tier-rank{ background:var(--ink); color:var(--accent); }
  .cert-tier:nth-child(2) .cert-tier-rank{ background:var(--freee); color:var(--white); }
  .cert-tier:nth-child(3) .cert-tier-rank{ background:var(--accent); color:var(--ink); }
  .cert-tier-score{
    font-family:"M PLUS Rounded 1c"; font-weight:900;
    font-size:28px; color:var(--ink); margin-bottom:8px;
  }
  .cert-tier-label{
    font-weight:900; font-size:15px; margin-bottom:10px;
    font-family:"M PLUS Rounded 1c";
  }
  .cert-tier-detail{
    font-size:12px; line-height:1.8; color:var(--ink-soft); text-align:left;
  }
  .cert-format{
    max-width:640px; margin:0 auto;
    background:var(--white); border:3px solid var(--ink);
    border-radius:20px; padding:32px 28px;
    box-shadow: 5px 5px 0 var(--ink);
    text-align:left;
  }
  .cert-format h4{
    font-family:"M PLUS Rounded 1c"; font-weight:900;
    font-size:16px; margin-bottom:16px; text-align:center;
  }
  .cert-format-list{ list-style:none; }
  .cert-format-list li{
    font-size:13px; padding:10px 0 10px 28px; position:relative;
    border-bottom:1px dashed rgba(10,21,48,.15); color:var(--ink-soft); line-height:1.7;
  }
  .cert-format-list li:last-child{ border-bottom:none; }
  .cert-format-list li::before{
    content:""; position:absolute; left:0; top:14px;
    width:14px; height:14px; border-radius:4px;
    background:var(--freee); opacity:.7;
  }

  /* ========================= CAREER ========================= */
  .careers{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:24px;
  }
  @media(max-width:820px){ .careers{ grid-template-columns:1fr; } }
  .career{
    background:var(--white); border:3px solid var(--ink);
    border-radius:20px; padding:32px 28px 28px;
    box-shadow: 6px 6px 0 var(--ink);
  }
  .career-num{
    display:inline-block; font-family:"JetBrains Mono", monospace;
    font-weight:700; font-size:11px; letter-spacing:.16em;
    padding:5px 14px; background:var(--ink); color:var(--accent);
    border-radius:999px; margin-bottom:16px;
  }
  .career:nth-child(2) .career-num{ background:var(--freee); color:var(--white); }
  .career:nth-child(3) .career-num{ background:var(--pink); color:var(--white); }
  .career-ttl{ font-family:"M PLUS Rounded 1c"; font-weight:900; font-size:22px; margin-bottom:10px; }
  .career-pay{
    font-family:"JetBrains Mono", monospace; font-weight:700;
    font-size:14px; color:var(--freee-deep);
    padding:8px 14px; background:var(--paper-2);
    border-radius:10px; display:inline-block; margin-bottom:16px;
  }
  .career-body{ font-size:13px; color:var(--ink-soft); line-height:1.9; margin-bottom:16px; }
  .career-feats{ list-style:none; }
  .career-feats li{
    font-size:12px; padding:8px 0; padding-left:22px;
    position:relative; color:var(--ink-soft);
    border-top:1px dashed var(--paper-2);
  }
  .career-feats li:first-child{ border-top:none; }
  .career-feats li::before{
    content:"\2713"; position:absolute; left:0; top:6px;
    color:var(--freee); font-weight:900;
  }

  /* ========================= WHO ========================= */
  .who-list{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
  @media(max-width:820px){ .who-list{ grid-template-columns:1fr; } }
  .who-item{
    background:var(--accent); color:var(--ink);
    border:3px solid var(--ink); border-radius:24px;
    padding:32px 28px 28px;
    box-shadow: 7px 7px 0 var(--ink);
    position:relative;
  }
  .who-item:nth-child(2){ background:var(--pink); color:var(--white); }
  .who-item:nth-child(3){ background:var(--freee); color:var(--white); }
  .who-num{
    display:inline-block; font-family:"JetBrains Mono", monospace;
    font-weight:700; font-size:28px; margin-bottom:16px;
    padding:4px 18px; background:var(--white); color:var(--ink);
    border:3px solid var(--ink); border-radius:12px;
  }
  .who-item:nth-child(2) .who-num{ background:var(--white); color:var(--ink); }
  .who-item:nth-child(3) .who-num{ background:var(--accent); color:var(--ink); }
  .who-h{ font-family:"M PLUS Rounded 1c"; font-weight:900; font-size:18px; line-height:1.6; margin-bottom:12px; }
  .who-p{ font-size:13px; line-height:1.95; }

  /* ========================= PARTNERSHIP ========================= */
  .prt-sec{ background:var(--paper-2); }
  .prt-hero{
    background:var(--white); border:3px solid var(--ink);
    border-radius:24px; padding:48px 40px;
    box-shadow: 8px 8px 0 var(--ink);
    text-align:center; margin-bottom:32px;
  }
  .prt-logos{
    display:flex; gap:20px; justify-content:center; align-items:center;
    margin-bottom:24px; flex-wrap:wrap;
  }
  .prt-logos img{ height:32px; }
  .prt-logos .sep{ width:1px; height:24px; background:var(--ink); opacity:.2; }
  .prt-articles{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
  }
  @media(max-width:820px){ .prt-articles{ grid-template-columns:1fr; } }
  .prt-article{
    background:var(--white); border:3px solid var(--ink); border-radius:16px;
    overflow:hidden;
    box-shadow: 4px 4px 0 var(--ink);
    text-decoration:none; color:var(--ink); display:block;
    transition: transform .2s;
  }
  .prt-article:hover{ transform:translate(-3px,-3px); box-shadow:7px 7px 0 var(--ink); }
  .prt-article img{ width:100%; height:160px; object-fit:cover; display:block; }
  .prt-article-body{ padding:20px; }
  .prt-article-tag{
    display:inline-block; font-size:10px; letter-spacing:.12em;
    padding:3px 10px; background:var(--freee); color:var(--white);
    border-radius:999px; margin-bottom:10px;
    font-family:"JetBrains Mono", monospace; font-weight:700;
  }
  .prt-article-ttl{ font-size:14px; font-weight:900; margin-bottom:8px; line-height:1.5; }
  .prt-article-sub{ font-size:12px; color:var(--ink-soft); }

  /* ========================= PRICING ========================= */
  .price-sec{ background:var(--ink); color:var(--white); }
  .price-sec .sec-number{ background:rgba(255,255,255,.15); color:var(--white); }
  .price-sec .sec-title{ color:var(--white); }
  .price-sec .sec-title em::after{ background:var(--accent); }
  .price-sec .sec-lead{ color:rgba(255,255,255,.8); }

  .price-box{
    background:var(--accent); color:var(--ink);
    border:3px solid var(--accent);
    border-radius:32px;
    padding:56px 48px;
    box-shadow: 10px 10px 0 var(--freee);
    display:grid; grid-template-columns:1fr 1.2fr; gap:48px; align-items:center;
  }
  @media(max-width:820px){ .price-box{ grid-template-columns:1fr; padding:40px 28px; } }
  .price-big{
    font-family:"M PLUS Rounded 1c"; font-weight:900;
    font-size:clamp(48px, 7vw, 80px);
    line-height:1; letter-spacing:-.03em; color:var(--ink);
  }
  .price-big small{
    display:block; font-size:.22em; color:var(--ink); opacity:.75;
    margin-top:14px; letter-spacing:.05em;
  }
  .price-incl-ttl{
    font-family:"M PLUS Rounded 1c"; font-weight:900;
    font-size:18px; margin-bottom:16px;
    padding-bottom:12px; border-bottom:2px solid var(--ink);
  }
  .price-incl{ list-style:none; }
  .price-incl li{
    padding:10px 0; padding-left:28px; position:relative;
    font-size:14px; border-bottom:1px dashed rgba(10,21,48,.2);
    font-weight:700;
  }
  .price-incl li:last-child{ border-bottom:none; }
  .price-incl li::before{
    content:"\2713"; position:absolute; left:0; top:8px;
    width:20px; height:20px; line-height:20px; text-align:center;
    background:var(--ink); color:var(--accent);
    border-radius:50%; font-size:10px;
  }

  /* ========================= GUARANTEE ========================= */
  .guarantee-sec{ background:var(--white); }
  .guarantee-box{
    max-width:780px; margin:0 auto;
    background:var(--white);
    border:3px solid var(--ink); border-radius:24px;
    padding:48px 44px;
    box-shadow: 6px 6px 0 var(--ink);
    display:flex; gap:36px; align-items:center;
  }
  @media(max-width:640px){ .guarantee-box{ flex-direction:column; text-align:center; padding:36px 24px; gap:24px; } }
  .guarantee-icon{
    flex-shrink:0; width:88px; height:88px;
    background:var(--accent); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:40px; border:3px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
  }
  .guarantee-body h3{
    font-family:"M PLUS Rounded 1c"; font-weight:900;
    font-size:22px; margin-bottom:12px; color:var(--ink);
  }
  .guarantee-body p{
    font-size:14px; line-height:2; color:var(--ink-soft); margin-bottom:12px;
  }
  .guarantee-note{
    font-size:12px; color:var(--ink-soft); opacity:.7;
    border-top:1px dashed rgba(10,21,48,.2); padding-top:12px; margin-top:4px;
  }

  /* ========================= FAQ ========================= */
  .faq-list{ max-width:900px; margin:0 auto; }
  details.faq{
    background:var(--white);
    border:3px solid var(--ink); border-radius:16px;
    padding:0; margin-bottom:16px;
    box-shadow: 4px 5px 0 var(--ink);
    overflow:hidden;
  }
  details.faq summary{
    cursor:pointer; list-style:none;
    padding:22px 28px; display:flex; gap:18px; align-items:flex-start;
    font-weight:900; font-size:15px; line-height:1.6;
  }
  details.faq summary::-webkit-details-marker{ display:none; }
  .faq-q{
    flex-shrink:0;
    width:36px; height:36px; border-radius:50%;
    background:var(--freee); color:var(--white);
    display:flex; align-items:center; justify-content:center;
    font-family:"M PLUS Rounded 1c"; font-weight:900; font-size:15px;
  }
  .faq-mark{
    margin-left:auto; font-size:22px; color:var(--freee);
    transition: transform .2s; flex-shrink:0;
  }
  details.faq[open] .faq-mark{ transform:rotate(45deg); }
  .faq-body{
    padding:0 28px 24px 82px;
    font-size:13px; color:var(--ink-soft); line-height:2;
    font-weight:500;
  }
  @media(max-width:520px){
    details.faq summary{ padding:18px; }
    .faq-body{ padding:0 18px 18px 18px; }
  }

  /* ========================= FINAL CTA ========================= */
  .final-cta{
    background:var(--freee); color:var(--white);
    padding:120px 24px; position:relative; overflow:hidden; text-align:center;
  }
  @media(max-width:720px){ .final-cta{ padding:80px 20px; } }
  .final-badge{
    display:inline-block;
    font-family:"JetBrains Mono", monospace; font-weight:700;
    font-size:12px; letter-spacing:.2em;
    padding:6px 20px;
    background:var(--accent); color:var(--ink);
    border-radius:999px;
    margin-bottom:28px;
  }
  .final-h{
    font-family:"M PLUS Rounded 1c"; font-weight:900;
    font-size:clamp(32px, 5vw, 64px);
    line-height:1.25; margin-bottom:28px;
    color:var(--white);
  }
  .final-h em{ font-style:normal; color:var(--accent); position:relative; }
  .final-h em::after{
    content:""; position:absolute; left:-4px; right:-4px; bottom:4px;
    height:14px; background:rgba(10,21,48,.3); z-index:-1; border-radius:4px;
  }
  .final-sub{
    max-width:560px; margin:0 auto 44px;
    font-size:16px; line-height:2; font-weight:500;
    color:rgba(255,255,255,.9);
  }
  .final-req{
    max-width:480px; margin:0 auto 36px;
    background:var(--white); color:var(--ink);
    border:3px solid var(--ink); border-radius:20px;
    padding:28px 32px;
    box-shadow: 8px 8px 0 var(--ink);
  }
  .final-req h3{
    font-family:"M PLUS Rounded 1c"; font-weight:900; font-size:16px;
    margin-bottom:16px; padding-bottom:12px;
    border-bottom:2px dashed var(--paper-2);
  }
  .final-req ul{ list-style:none; }
  .final-req li{
    display:flex; justify-content:space-between;
    padding:10px 0; font-size:13px;
    border-bottom:1px dashed var(--paper-2);
  }
  .final-req li:last-child{ border-bottom:none; }
  .final-req li span:first-child{ color:var(--ink-soft); }
  .final-req li span:last-child{
    font-family:"JetBrains Mono", monospace; font-weight:900;
    color:var(--freee-deep);
  }

  /* ========================= FOOTER ========================= */
  footer{
    background:var(--ink); color:rgba(255,255,255,.7);
    padding:56px 0 72px;
  }
  .foot-grid{
    display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap;
  }
  .foot-sig{
    font-family:"M PLUS Rounded 1c"; font-weight:900;
    font-size:18px; color:var(--white);
  }
  .foot-sig small{ display:block; font-size:11px; font-weight:700; color:rgba(255,255,255,.6); margin-top:4px; letter-spacing:.04em; }
  footer a{ color:rgba(255,255,255,.85); text-decoration:none; font-size:13px; font-weight:700; }
  footer a:hover{ color:var(--accent); }
  .foot-links{ display:flex; gap:28px; flex-wrap:wrap; }

  /* ========================= ANIMS ========================= */
  @keyframes fadeUp{ 0%{opacity:0;transform:translateY(22px);} 100%{opacity:1;transform:translateY(0);} }
  @keyframes popIn{ 0%{opacity:0; transform:scale(.6) rotate(-4deg);} 100%{opacity:1; transform:scale(1) rotate(-3deg);} }
  @keyframes floaty{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }
  @keyframes spin{ from{transform:rotate(0);} to{transform:rotate(360deg);} }

  /* FADE IN */
  .fade{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
  .fade.visible{opacity:1;transform:none}
  .d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}