:root{
    --ink:#2A2F3C;
    --ink-soft:#5C6474;
    --ink-faint:#969DAC;
    --bg:#FBF8F2;
    --bg-2:#F4EEE2;
    --surface:#FFFFFF;
    --line:#E9E2D4;
    --coral:#FF6B5B;
    --coral-deep:#E8503F;
    --agree:#11B5A4;
    --agree-soft:#D6F2EE;
    --disagree:#7C6BF0;
    --disagree-soft:#E7E2FB;
    --teal:var(--agree);
    --teal-soft:var(--agree-soft);
    --violet:var(--disagree);
    --violet-soft:var(--disagree-soft);
    --gray-dot:#A7B2C6;
    --grp-pl:#D99A1E;
    --grp-pl-bg:#F8EFD6;
    --grp-pl-dark:#946410;
    --grp-pc:#8B6FB0;
    --grp-pc-bg:#ECE3F2;
    --grp-pc-dark:#5E4684;
    --grp-tl:#4A90B8;
    --grp-tl-bg:#E3EDF4;
    --grp-tl-dark:#2E6A8E;
    --grp-tc:#5A9E6F;
    --grp-tc-bg:#E5EFE6;
    --grp-tc-dark:#3C7A4F;
    --shadow:0 18px 48px -22px rgba(58,50,30,.28);
    --shadow-sm:0 6px 20px -12px rgba(58,50,30,.30);
    --r:18px;
    --font-sans:"Hiragino Sans","Noto Sans JP","Yu Gothic",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
    --font-mono:ui-monospace,"SFMono-Regular","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  body{
    font-family:var(--font-sans);
    color:var(--ink);
    background:
      radial-gradient(1100px 520px at 88% -8%, rgba(255,107,91,.10) 0%, rgba(255,107,91,0) 60%),
      radial-gradient(900px 520px at 6% 4%, rgba(17,181,164,.10) 0%, rgba(17,181,164,0) 55%),
      var(--bg);
    line-height:1.8;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1060px;margin:0 auto;padding:28px 20px 64px}
  #quiz,#result{max-width:760px;margin:0 auto}
  .stage{display:none;opacity:0}
  .stage.is-active{display:block;animation:rise .48s cubic-bezier(.2,.7,.3,1) both}
  .stage.is-leaving{animation:fall .22s cubic-bezier(.4,0,1,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @keyframes fall{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px)}}

  /* ---------- shared ---------- */
  .eyebrow{
    font:600 12px/1 var(--font-mono);
    letter-spacing:.22em;text-transform:uppercase;
    color:var(--ink-faint);
  }
  .card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r);
    box-shadow:var(--shadow);
  }
  .btn{
    font:700 16px/1 var(--font-sans);
    color:#fff;background:var(--coral);
    border:none;border-radius:14px;
    padding:16px 26px;cursor:pointer;
    box-shadow:0 12px 26px -12px var(--coral-deep);
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .btn:hover{background:var(--coral-deep);transform:translateY(-1px)}
  .btn:active{transform:translateY(0)}
  .btn--ghost{
    background:transparent;color:var(--ink-soft);
    box-shadow:none;border:1px solid var(--line);
    font-weight:600;font-size:15px;padding:12px 20px;
  }
  .btn--ghost:hover{background:var(--bg-2);color:var(--ink);transform:none}
  :focus-visible{outline:3px solid rgba(124,107,240,.55);outline-offset:2px;border-radius:8px}

  /* ---------- intro ---------- */
  .hero{padding:14px 4px 0}
  .hero-badges{display:flex;gap:10px;flex-wrap:wrap}
  .hbadge{
    font-size:12.5px;font-weight:800;color:var(--ink-soft);
    background:var(--surface);border:1px solid var(--line);border-radius:99px;
    padding:8px 15px;box-shadow:var(--shadow-sm);
  }

  /* 2カラムヒーロー：左テキスト × 右4カラータイル */
  .ihero{display:grid;grid-template-columns:1.08fr 1fr;gap:40px;align-items:center;padding:16px 0 0}
  .ihero-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .gtile{
    display:flex;flex-direction:column;align-items:center;gap:5px;
    background:var(--tbg,var(--surface));border:2px solid transparent;border-radius:18px;
    padding:16px 12px 13px;cursor:pointer;text-align:center;
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
  }
  .gtile:hover{border-color:var(--tc);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
  .gtile img{width:100%;max-width:170px;border-radius:12px;filter:drop-shadow(0 10px 16px rgba(58,50,30,.18))}
  .gt-name{font-size:13.5px;font-weight:800;color:var(--td,var(--ink));margin-top:4px}
  .gt-axis{font:700 10.5px/1.4 var(--font-mono);color:var(--ink-faint);letter-spacing:.08em}
  @media(max-width:900px){
    .ihero{grid-template-columns:1fr;gap:30px}
    .ihero-txt{text-align:center}
    .ihero .hero-badges{justify-content:center}
    .ihero .start-hero{align-items:center}
    .ihero .lead{margin-left:auto;margin-right:auto}
  }

  .how{display:grid;grid-template-columns:1fr;gap:16px;margin:40px 0 28px}
  @media(min-width:600px){.how{grid-template-columns:repeat(3,1fr);gap:14px}}
  .how-step{
    position:relative;background:var(--surface);border:1px solid var(--line);
    border-radius:18px;padding:24px 16px 18px;text-align:center;box-shadow:var(--shadow-sm);
  }
  .how-num{
    position:absolute;top:-13px;left:50%;transform:translateX(-50%);
    width:26px;height:26px;border-radius:50%;background:var(--coral);color:#fff;
    font:800 13px/26px var(--font-mono);
  }
  .how-emoji{display:block;font-size:32px;line-height:1;margin-bottom:10px}
  .how-step b{display:block;font-size:15px;letter-spacing:-.01em}
  .how-step p{font-size:12.5px;color:var(--ink-soft);line-height:1.6;margin-top:5px}

  .axis-foot{
    font-size:13px;color:var(--ink-soft);text-align:center;
    margin:16px -22px 0;padding:14px 22px 16px;border-top:1px dashed var(--line);
  }
  .axis-foot b{color:var(--coral);font-family:var(--font-mono);letter-spacing:.08em}
  .intro-cta{display:flex;justify-content:center;margin-top:30px}
  .hero h1{
    font-size:clamp(30px,7.4vw,46px);
    font-weight:800;letter-spacing:-.02em;line-height:1.18;
    margin:14px 0 0;
  }
  .hero h1 .hl{
    background:linear-gradient(180deg,transparent 62%, rgba(17,181,164,.30) 62%);
    padding:0 .05em;
  }
  .hero p.lead{
    color:var(--ink-soft);font-size:16px;line-height:1.85;
    margin:18px 0 0;max-width:54ch;
  }
  .meta-row{display:flex;gap:22px;flex-wrap:wrap;margin:22px 0 28px}
  .meta{display:flex;align-items:baseline;gap:8px}
  .meta b{font:800 22px/1 var(--font-mono);color:var(--ink)}
  .meta span{font-size:13px;color:var(--ink-faint)}

  .axis-preview{padding:22px 22px 8px;margin:6px auto 0;max-width:820px}
  .axis-preview .ttl{font-size:13px;color:var(--ink-faint);margin-bottom:18px;letter-spacing:.04em}
  .axrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:0 0 16px}
  .axrow:last-child{margin-bottom:6px}
  .axend{font-size:14px;font-weight:700}
  .axend.r{text-align:right}
  .axend .k{
    display:inline-flex;align-items:center;justify-content:center;
    width:26px;height:26px;border-radius:8px;margin-right:7px;
    font:800 13px/1 var(--font-mono);color:#fff;vertical-align:-3px;
  }
  .axrow.r .axend .k{margin-right:0;margin-left:7px}
  .k.teal{background:var(--teal)} .k.violet{background:var(--violet)}
  .axmid{text-align:center;min-width:96px}
  .axmid .nm{font-size:12px;color:var(--ink-soft);font-weight:600}
  .axmid .track{height:4px;border-radius:99px;background:linear-gradient(90deg,var(--teal),var(--violet));margin-top:7px;opacity:.5}

  .start-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:30px}
  .start-hero{flex-direction:column;align-items:flex-start;gap:10px;margin-top:26px}
  .btn-xl{font-size:18px;padding:20px 44px;border-radius:18px}
  .note{font-size:12.5px;color:var(--ink-faint);line-height:1.7;margin-top:22px}
  .start-hero .note{margin-top:0}

  /* ---------- quiz ---------- */
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
  .count{font:600 13px/1 var(--font-mono);color:var(--ink-soft);letter-spacing:.08em}
  .count em{color:var(--coral);font-style:normal}
  .progress{height:7px;background:var(--bg-2);border-radius:99px;overflow:hidden;flex:1}
  .progress > i{display:block;height:100%;width:0;border-radius:99px;
    background:linear-gradient(90deg,var(--teal),#1ED0BC);transition:width .45s cubic-bezier(.2,.7,.3,1)}

  .q-card{padding:38px 26px 32px;text-align:center;min-height:320px;display:flex;flex-direction:column;justify-content:center}
  .q-card.is-enter{animation:qIn .38s cubic-bezier(.2,.7,.3,1) both}
  @keyframes qIn{from{opacity:.4;transform:translateY(10px)}to{opacity:1;transform:none}}
  .q-text{font-size:clamp(20px,4.8vw,26px);font-weight:700;line-height:1.65;letter-spacing:-.01em;max-width:32ch;margin:0 auto}

  .scale{margin:36px auto 4px;max-width:540px}
  .scale-dots{display:flex;align-items:center;justify-content:center;gap:clamp(6px,2.8vw,18px)}
  .dot{
    --c:var(--gray-dot);
    border:2.5px solid var(--c);background:transparent;border-radius:50%;
    cursor:pointer;padding:0;flex:0 0 auto;position:relative;
    transition:transform .14s ease, background .14s ease, box-shadow .14s ease, border-color .14s ease;
  }
  .dot:hover{transform:scale(1.1)}
  .dot:focus-visible{outline:3px solid color-mix(in srgb,var(--c) 45%,transparent);outline-offset:3px}
  .dot.is-on{background:var(--c);border-color:var(--c);box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 20%,transparent)}
  .scale-ends{display:flex;justify-content:space-between;margin-top:20px;padding:0 4px}
  .scale-ends span{font-size:13px;font-weight:700}
  .scale-ends .agree{color:var(--agree)}
  .scale-ends .disagree{color:var(--disagree)}
  .scale-hint{font-size:11px;color:var(--ink-faint);margin-top:14px;letter-spacing:.04em}
  .q-foot{display:flex;justify-content:center;margin-top:26px}
  .back{background:none;border:none;color:var(--ink-faint);font:600 14px/1 var(--font-sans);cursor:pointer;padding:8px 12px;display:inline-flex;align-items:center;gap:6px}
  .back:hover{color:var(--ink-soft)}
  .back[disabled]{opacity:.35;cursor:default}

  /* ---------- result ---------- */
  .res-head{padding:32px 26px 28px;position:relative;overflow:hidden;text-align:center}
  .res-head::before{content:"";position:absolute;inset:0;
    background:radial-gradient(420px 220px at 50% -10%,color-mix(in srgb,var(--gc) 18%,transparent),transparent 72%);pointer-events:none}
  .res-code{font:800 clamp(44px,12vw,72px)/1 var(--font-mono);letter-spacing:.14em;margin:0 0 10px;color:var(--gd,var(--ink))}
  .res-code b{color:var(--gc,var(--coral));font-weight:800}
  .res-job{font-size:clamp(22px,5.8vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.22;margin-bottom:18px}
  .res-emoji{font-size:42px;line-height:1}
  .res-name{font-size:17px;font-weight:700;color:var(--ink-soft);margin-top:12px}
  .res-nick{display:inline-block;margin-top:8px;font-size:13px;font-weight:700;color:var(--agree);
    background:var(--agree-soft);border-radius:99px;padding:6px 14px}
  .res-essence{color:var(--ink-soft);font-size:16px;line-height:1.9;margin:18px 0 0;max-width:50ch}
  .riasec{font:600 12px/1.6 var(--font-mono);color:var(--ink-faint);margin-top:16px;letter-spacing:.04em}

  .res-formula{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:-6px 0 18px}
  .res-formula .fw{font-size:14px;font-weight:800;padding:7px 14px;border-radius:99px;color:#fff;letter-spacing:.02em}
  .res-formula .fw--teal{background:var(--teal)}
  .res-formula .fw--violet{background:var(--violet)}
  .res-formula .fx{font:700 12px/1 var(--font-mono);color:var(--ink-faint)}

  .bars{padding:24px 26px}
  .bars-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
  .bars-head h3{margin-bottom:18px}
  .conf-badge{font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:99px;margin-bottom:14px;cursor:help}
  .conf--hi{background:rgba(17,181,164,.12);color:var(--teal-deep,#0E8A7D)}
  .conf--mid{background:rgba(58,50,30,.07);color:var(--ink-soft)}
  .conf--lo{background:rgba(255,107,91,.12);color:var(--coral-deep,#D9503F)}

  .res-alt{border-top:1px dashed var(--line)}
  .res-alt-p{font-size:13.5px;line-height:1.8;color:var(--ink-soft);margin:0 0 14px}
  .res-alt-p b{color:var(--ink)}
  .res-alt-list{display:flex;flex-direction:column;gap:10px}
  .res-alt-card{
    display:flex;align-items:center;gap:14px;width:100%;
    padding:14px 18px;border:1.5px solid var(--line);border-radius:16px;
    background:var(--gbg,var(--bg-2));cursor:pointer;text-align:left;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .res-alt-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
  .res-alt-card .avatar{width:56px;height:56px;flex:none}
  .res-alt-info{display:flex;flex-direction:column;gap:3px;min-width:0}
  .res-alt-job{font-size:15.5px;font-weight:800;color:var(--ink)}
  .res-alt-code{font:600 12px/1.4 var(--font-mono);color:var(--ink-soft);letter-spacing:.06em}
  .res-alt-diff{font-size:11.5px;line-height:1.6;color:var(--ink-soft)}
  .res-alt-fit{
    flex:none;margin-left:auto;text-align:center;
    font-size:10.5px;font-weight:700;color:var(--ink-faint);line-height:1.4;
  }
  .res-alt-fit b{display:block;font:800 17px/1.2 var(--font-mono);color:var(--gc,var(--coral))}
  .res-alt-arrow{font-weight:800;color:var(--gc,var(--coral))}

  /* ---------- 総合マッチ度バッジ ---------- */
  .res-fit{
    display:inline-flex;align-items:baseline;gap:7px;
    font-size:13px;font-weight:700;color:var(--ink-soft);
    background:rgba(255,255,255,.75);border:1px solid var(--line);border-radius:99px;
    padding:8px 16px;margin:-6px 0 16px;
  }
  .res-fit b{font:800 17px/1 var(--font-mono);color:var(--gc,var(--coral))}

  /* ---------- なぜこの結果？（計算の根拠） ---------- */
  .evidence .ev-steps{
    list-style:none;counter-reset:evs;display:grid;gap:8px;margin:0 0 16px;
  }
  .evidence .ev-steps li{
    counter-increment:evs;position:relative;padding:9px 12px 9px 40px;
    background:var(--bg);border:1px solid var(--line);border-radius:10px;
    font-size:13px;line-height:1.7;color:var(--ink-soft);
  }
  .evidence .ev-steps li b{color:var(--ink)}
  .evidence .ev-steps li::before{
    content:counter(evs);position:absolute;left:12px;top:50%;transform:translateY(-50%);
    width:20px;height:20px;border-radius:50%;background:var(--coral);color:#fff;
    font:800 11px/20px var(--font-mono);text-align:center;
  }
  .ev-lead{font-size:12.5px;color:var(--ink-soft);line-height:1.75;margin:0 0 10px}
  .ev-axis{border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:8px;overflow:hidden}
  .ev-axis summary{
    display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
    padding:12px 14px;cursor:pointer;list-style:none;font-size:13.5px;
  }
  .ev-axis summary::-webkit-details-marker{display:none}
  .ev-axis summary::after{content:"▾";color:var(--ink-faint);font-size:12px;transition:transform .2s ease}
  .ev-axis[open] summary::after{transform:rotate(180deg)}
  .ev-axis summary b{color:var(--ink)}
  .ev-sum-mini{font-size:11.5px;font-weight:700;color:var(--ink-faint);margin-left:auto}
  .ev-rows{border-top:1px dashed var(--line)}
  .ev-row{
    display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
    padding:9px 14px;border-bottom:1px dashed var(--line);
  }
  .ev-row:last-child{border-bottom:none}
  .ev-q{font-size:12px;line-height:1.6;color:var(--ink)}
  .ev-q small{display:block;font:700 10px/1.4 var(--font-mono);color:var(--ink-faint);letter-spacing:.06em}
  .ev-a{font-size:11px;font-weight:700;color:var(--ink-soft);white-space:nowrap}
  .ev-pt{
    font:800 11.5px/1 var(--font-mono);white-space:nowrap;
    padding:5px 9px;border-radius:8px;text-align:center;min-width:58px;
  }
  .ev-pt--teal{background:var(--teal-soft);color:var(--teal)}
  .ev-pt--violet{background:var(--violet-soft);color:var(--violet)}
  .ev-pt--zero{background:var(--bg-2);color:var(--ink-faint)}
  .ev-total{
    font-size:12.5px;line-height:1.7;color:var(--ink-soft);
    padding:10px 14px;background:var(--bg);border-top:1px solid var(--line);margin:0;
  }
  .ev-total b{color:var(--ink)}
  .ev-more{margin:12px 0 0;font-size:13px}
  .ev-more a{color:var(--coral);font-weight:700;text-decoration:none}
  .ev-more a:hover{text-decoration:underline}
  @media(max-width:520px){
    .ev-row{grid-template-columns:1fr;gap:6px}
    .ev-a{white-space:normal}
    .ev-pt{justify-self:start}
  }

  .bars h3,.block h3{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);font-family:var(--font-mono);font-weight:600;margin-bottom:18px}
  .bar{margin:0 0 20px}
  .bar:last-child{margin-bottom:2px}
  .bar-top{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;font-weight:700;margin-bottom:8px}
  .bar-top .win{color:var(--ink)}
  .bar-top .lose{color:var(--ink-faint);font-weight:600}
  .bar-side em{font:800 12.5px/1 var(--font-mono);font-style:normal}
  .bar-side.lose em{opacity:.8}
  .bar-pct{font:800 13px/1 var(--font-mono)}
  .bar-track{position:relative;height:12px;background:var(--bg-2);border-radius:99px;overflow:hidden}
  .bar-fill{position:absolute;top:0;height:100%;border-radius:99px;transition:width .8s cubic-bezier(.2,.7,.3,1)}
  .bar-fill.from-l{left:0} .bar-fill.from-r{right:0}
  .bar-fill.agree{background:linear-gradient(90deg,var(--agree),#1ED0BC)}
  .bar-fill.disagree{background:linear-gradient(270deg,var(--disagree),#9A8CF6)}
  .bar-pct--agree{color:var(--agree)}
  .bar-pct--disagree{color:var(--disagree)}
  .bar-close{font:600 11px/1 var(--font-sans);color:var(--ink-faint);margin-left:4px}
  .bar-note{font-size:12.5px;line-height:1.75;color:var(--ink-soft);margin-top:8px}
  .bar-note b{color:var(--ink)}
  .res-validity{
    margin:20px 26px 0;padding:14px 16px;border-radius:12px;
    background:var(--grp-pl-bg);color:var(--grp-pl-dark);
    font-size:13px;line-height:1.75;
  }

  /* ---------- おすすめの職業（最重要ブロック） ---------- */
  .careers-hero{
    margin:18px 16px 0;padding:24px 20px 22px;border-radius:18px;
    background:linear-gradient(180deg,var(--gbg,#fff) 0%,#fff 85%);
    border:2px solid var(--gc,var(--coral));
    box-shadow:var(--shadow-sm);
  }
  .careers-h{
    font-size:17px;font-weight:900;color:var(--ink);
    margin:0 0 16px;text-align:center;letter-spacing:-.01em;
  }
  .careers-lead{
    font-size:13px;line-height:1.6;color:var(--ink-soft);
    text-align:center;margin:-8px 0 14px;
  }
  .careers-lead b{color:var(--gd,var(--coral))}
  .career-tops{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
  .career-top{
    display:flex;align-items:center;gap:14px;
    background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:14px 18px;
  }
  .career-rank{
    flex:none;width:32px;height:32px;border-radius:50%;
    background:var(--gc,var(--coral));color:#fff;
    font:800 15px/32px var(--font-mono);text-align:center;
  }
  .career-main{display:flex;flex-direction:column;gap:3px;min-width:0}
  .career-name{font-size:16.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
  .career-why{font-size:12px;line-height:1.5;color:var(--ink-soft)}
  .career-why b{color:var(--gd,var(--coral));font-weight:800}
  .careers-more-lbl{
    display:block;font-size:12px;font-weight:700;color:var(--ink-faint);
    letter-spacing:.06em;margin-bottom:10px;
  }
  @media(max-width:480px){
    .careers-hero{margin:14px 10px 0;padding:20px 14px 18px}
    .career-name{font-size:15px}
  }

  .block{padding:24px 26px;border-top:1px solid var(--line)}
  .ul{list-style:none;display:grid;gap:12px}
  .ul li{position:relative;padding-left:24px;font-size:15px;line-height:1.7;color:var(--ink)}
  .ul li::before{content:"";position:absolute;left:4px;top:10px;width:8px;height:8px;border-radius:50%;background:var(--coral)}
  .ul.soft li::before{background:var(--teal)}
  .ul.warn li::before{background:var(--violet)}
  .chips{display:flex;flex-wrap:wrap;gap:10px}
  .chip{font-size:14px;font-weight:600;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:9px 14px}
  .match{display:flex;gap:12px;flex-wrap:wrap}
  .match-card{flex:1 1 200px;border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--bg)}
  .match-card .mc{font:800 18px/1 var(--font-mono);letter-spacing:.08em;color:var(--coral)}
  .match-card .mn{font-size:14px;font-weight:700;margin-top:6px}

  .res-foot{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:26px;padding:0 2px}
  .disclaimer{font-size:12.5px;color:var(--ink-faint);line-height:1.8;margin-top:20px;padding:16px 18px;background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:14px}

  @media (max-width:560px){
    .wrap{padding:20px 14px 56px}
    .res-foot .btn,.res-foot .btn--ghost{flex:1}
    .start-row .btn{flex:1}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
  }

  /* ---------- characters ---------- */
  .avatar{display:block;line-height:0}
  .avatar svg{width:100%;height:auto;display:block}
  .avatar--lg{width:100%;max-width:480px;margin:10px auto 16px}
  .res-catch{font-size:18px;font-weight:900;color:var(--ink);margin:14px 0 0;line-height:1.5;letter-spacing:.01em}
  .res-cry{font-size:16px;font-weight:800;color:var(--coral);margin:10px 0 0;letter-spacing:.01em}
  .res-char{color:var(--ink-soft);font-size:14.5px;line-height:1.8;margin:8px 0 0}

  /* ---------- persona（この人、こんな人） ---------- */
  .persona{margin:18px 16px 0;padding:20px 18px;border:1px solid var(--line);border-radius:16px;
    background:linear-gradient(180deg,var(--gbg,#fff) 0%, #fff 70%)}
  .persona-h{font-size:15px;font-weight:900;color:var(--ink);margin:0 0 10px;display:flex;align-items:center;gap:8px}
  .persona-h::before{content:"";width:18px;height:18px;border-radius:6px;background:var(--gc,var(--coral))}
  .persona-vibe{font-size:14px;color:var(--ink-soft);line-height:1.8;margin:0 0 14px}
  .persona-aruaru{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
  .persona-aruaru li{position:relative;padding:10px 12px 10px 34px;background:#fff;border:1px solid var(--line);
    border-radius:10px;font-size:13.5px;line-height:1.65;color:var(--ink)}
  .persona-aruaru li::before{content:"✓";position:absolute;left:12px;top:10px;color:var(--gc,var(--coral));font-weight:900}
  .persona-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:12px}
  @media(min-width:520px){.persona-grid{grid-template-columns:1fr 1fr}}
  .persona-cell{padding:12px 14px;border-radius:12px;background:#fff;border:1px solid var(--line)}
  .persona-cell p{font-size:13.5px;line-height:1.7;color:var(--ink);margin:6px 0 0}
  .persona-love{border-left:4px solid var(--teal)}
  .persona-tired{border-left:4px solid var(--violet)}
  .persona-cap{display:inline-block;font:800 11px/1 var(--font-mono);letter-spacing:.08em;color:var(--ink-faint)}
  .persona-near{margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.7}
  .persona-near .persona-cap{margin-right:8px}

  .res-share{margin-top:22px;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
  .res-share-lbl{display:block;font-size:12px;font-weight:700;color:var(--ink-faint);letter-spacing:.08em;margin-bottom:12px}
  .res-share-btns{display:flex;gap:10px;flex-wrap:wrap}
  .share-btn{
    font:600 14px/1 var(--font-sans);border-radius:12px;padding:12px 18px;cursor:pointer;
    border:1px solid var(--line);background:var(--bg);color:var(--ink);transition:background .15s ease,border-color .15s ease;
  }
  .share-btn:hover{background:var(--bg-2)}
  .share-btn--x{background:#0f1419;color:#fff;border-color:#0f1419}
  .share-btn--x:hover{background:#262626;border-color:#262626}
  .share-msg{font-size:12px;color:var(--agree);margin-top:10px;min-height:1.2em}

  .cast{margin-top:36px;text-align:center}
  .cast-lead{font-size:12.5px;color:var(--ink-faint);letter-spacing:.06em;margin-bottom:14px}
  .cast-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:18px}
  .cast-avatar{
    width:clamp(68px,10.5vw,104px);padding:0;border:2.5px solid color-mix(in srgb,var(--gc) 40%,transparent);
    border-radius:16px;background:var(--surface);cursor:pointer;overflow:hidden;
    transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
  }
  .cast-avatar:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--gc)}
  .cast-avatar .avatar{display:block}
  .cast-btn{background:none;border:none;color:var(--coral);font:800 15px/1 var(--font-sans);cursor:pointer;padding:10px 4px}
  .cast-btn:hover{text-decoration:underline}

  /* ---------- コードの意味（タイプ詳細の根拠） ---------- */
  .ana-lead{font-size:13px;color:var(--ink-soft);line-height:1.8;margin:0 0 16px}
  .ana-row{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px dashed var(--line)}
  .ana-row:last-child{padding-bottom:2px}
  .ana-k{
    flex:none;width:40px;height:40px;border-radius:12px;color:#fff;
    font:800 19px/40px var(--font-mono);text-align:center;
  }
  .ana-k.teal{background:var(--teal)}
  .ana-k.violet{background:var(--violet)}
  .ana-body{display:flex;flex-direction:column;gap:2px;min-width:0}
  .ana-axis{font:700 11px/1.4 var(--font-mono);color:var(--ink-faint);letter-spacing:.08em}
  .ana-win{font-size:15px;font-weight:800;color:var(--ink)}
  .ana-note{font-size:12.5px;color:var(--ink-soft);line-height:1.7;margin-top:2px}

  /* ---------- gallery ---------- */
  .gal-legend{padding:22px 22px 18px;margin:14px 0 20px}
  .gal-legend-h{font-size:15px;font-weight:900;color:var(--ink);margin-bottom:8px}
  .gal-legend-p{font-size:13px;color:var(--ink-soft);line-height:1.8;margin:0 0 14px}
  .gal-legend-p b{color:var(--ink)}
  .gl-rows{display:flex;flex-direction:column;gap:8px}
  .gl-row{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 14px;
  }
  .gl-axis{flex:none;font:700 11.5px/1.4 var(--font-mono);color:var(--ink-faint);letter-spacing:.04em;min-width:88px}
  .gl-pole{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--ink)}
  .gl-k{
    display:inline-flex;align-items:center;justify-content:center;
    width:24px;height:24px;border-radius:7px;color:#fff;
    font:800 12px/1 var(--font-mono);
  }
  .gl-k.teal{background:var(--teal)}
  .gl-k.violet{background:var(--violet)}
  .gl-or{font-size:11.5px;color:var(--ink-faint);font-weight:700}
  .gl-formula{
    font-size:13px;color:var(--ink-soft);text-align:center;
    margin:16px -22px 0;padding:13px 22px 0;border-top:1px dashed var(--line);
  }
  .gl-formula b{color:var(--ink)}
  .cl-teal{color:var(--teal);font-family:var(--font-mono);letter-spacing:.06em}
  .cl-violet{color:var(--violet);font-family:var(--font-mono);letter-spacing:.06em}
  .tcard .tname{font-size:11px;color:var(--ink-soft);line-height:1.4;margin-top:3px}

  .gal-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
  .gal-h{font-size:clamp(23px,5.4vw,32px);font-weight:800;letter-spacing:-.02em}
  .gal-sub{color:var(--ink-soft);font-size:14.5px;line-height:1.8;margin:8px 0 24px;max-width:46ch}
  .gal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  @media(min-width:540px){.gal-grid{grid-template-columns:repeat(3,1fr)}}
  @media(min-width:760px){.gal-grid{grid-template-columns:repeat(4,1fr)}}
  .gal-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 10px 15px;text-align:center;box-shadow:var(--shadow-sm)}
  .gal-card .avatar{width:100%;margin:0 auto 10px}
  .gal-card .gc{font:800 15px/1 var(--font-mono);letter-spacing:.12em;color:var(--coral)}
  .gal-card .gn{font-size:13.5px;font-weight:700;margin-top:6px;line-height:1.4}
  .gal-card .ga{font-size:11.5px;color:var(--ink-faint);margin-top:5px}

  /* ---------- 4 color groups ---------- */
  .res-head{border-top:6px solid var(--gc,transparent)}
  .res-group{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:800;color:var(--gc);background:var(--gbg);border-radius:99px;padding:8px 15px;margin:16px 0 8px}
  .res-group small{font:600 11px/1 var(--font-mono);color:var(--ink-faint);letter-spacing:.04em}

  .gal-quad{
    display:grid;grid-template-columns:1fr;gap:14px;
    margin-bottom:8px;
  }
  @media(min-width:640px){
    .gal-quad{grid-template-columns:repeat(2,1fr);gap:16px}
  }
  .gal-group{
    border-radius:20px;padding:18px 14px 16px;
    background:var(--gbg);
    border:1px solid color-mix(in srgb,var(--gc) 22%,transparent);
  }
  .gal-gh{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
  .gal-dot{width:13px;height:13px;border-radius:50%;flex:0 0 auto}
  .gal-gname{font-size:16px;font-weight:800;letter-spacing:-.01em}
  .gal-gaxis{font:600 11px/1 var(--font-mono);color:var(--gd,var(--ink-faint));letter-spacing:.06em;margin:4px 0 0}
  .gal-gdesc{font-size:12px;color:var(--ink-soft);line-height:1.65;margin:8px 0 14px}
  .gal-grow{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  @media(min-width:640px){.gal-grow{grid-template-columns:repeat(2,1fr)}}
  .tcard{
    background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);border-radius:14px;
    padding:12px 8px 10px;text-align:center;cursor:pointer;width:100%;
    transition:transform .14s ease,box-shadow .14s ease;
  }
  .tcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
  .tcard:focus-visible{outline:3px solid color-mix(in srgb,var(--gc) 50%,transparent);outline-offset:2px}
  .tcard .avatar{width:100%;margin:0 auto 8px}
  .tcard .tjob{font-size:12.5px;font-weight:800;line-height:1.35;color:var(--ink)}
  .tcard .tcode{font:800 11px/1 var(--font-mono);letter-spacing:.1em;color:var(--gc,var(--coral));margin-top:5px}

  .avatar img.avatar-photo{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center top;border-radius:12px;display:block}
  .avatar--lg img.avatar-photo{border-radius:16px}

  /* ---------- global launcher (全ページ) ---------- */
  .ctf-fab{
    position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));
    z-index:99990;display:inline-flex;align-items:center;gap:8px;
    font:700 14px/1 var(--font-sans);color:#fff;background:var(--coral);
    border:none;border-radius:999px;padding:14px 18px 14px 14px;cursor:pointer;
    box-shadow:0 14px 34px -14px var(--coral-deep),0 4px 14px rgba(22,36,63,.18);
    transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  }
  .ctf-fab:hover{background:var(--coral-deep);transform:translateY(-2px)}
  .ctf-fab:focus-visible{outline:3px solid rgba(255,107,91,.45);outline-offset:3px}
  .ctf-fab__icon{font-size:18px;line-height:1}
  .ctf-fab__label{letter-spacing:.02em}
  @media(max-width:480px){
    .ctf-fab{padding:14px}
    .ctf-fab__label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  }

  body.ctf-modal-open{overflow:hidden}
  .ctf-modal{
    position:fixed;inset:0;z-index:99999;display:flex;align-items:flex-end;justify-content:center;
    padding:0;
  }
  .ctf-modal[hidden]{display:none}
  .ctf-modal__backdrop{position:absolute;inset:0;background:rgba(22,36,63,.52);backdrop-filter:blur(2px)}
  .ctf-modal__panel{
    position:relative;z-index:1;width:min(820px,100%);max-height:min(96vh,100dvh);
    display:flex;flex-direction:column;background:var(--bg);
    border-radius:20px 20px 0 0;box-shadow:var(--shadow);overflow:hidden;
    animation:ctfModalIn .28s cubic-bezier(.2,.7,.3,1) both;
  }
  @media(min-width:640px){
    .ctf-modal{align-items:center;padding:20px}
    .ctf-modal__panel{border-radius:var(--r);max-height:min(92vh,100dvh)}
  }
  @keyframes ctfModalIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  .ctf-modal__head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:14px 16px;background:var(--surface);border-bottom:1px solid var(--line);flex:0 0 auto;
  }
  .ctf-modal__title{font-size:15px;font-weight:800;color:var(--ink)}
  .ctf-modal__close{
    font:400 28px/1 var(--font-sans);color:var(--ink-soft);background:transparent;border:none;
    width:40px;height:40px;border-radius:10px;cursor:pointer;flex:0 0 auto;
  }
  .ctf-modal__close:hover{color:var(--ink);background:var(--bg)}
  .ctf-modal__close:focus-visible{outline:3px solid rgba(255,107,91,.35);outline-offset:2px}
  .ctf-modal__body{overflow:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto}
  .ctf-modal__body .wrap{padding:20px 16px 48px}
  @media(min-width:640px){.ctf-modal__body .wrap{padding:24px 24px 56px}}