/* compass-career-diagnosis.css
   対象: compass-career-diagnosis.html / https://canada-school.com/career/
*/

.cc-diag{
      --cc-navy:#0e1b3a;
      --cc-navy-2:#16244b;
      --cc-navy-3:#1f3160;
      --cc-gold:#c8a24a;
      --cc-gold-2:#e6c878;
      --cc-cream:#f6f1e6;
      --cc-ink:#0e1b3a;
      --cc-muted:#9aa6c4;
      --cc-line:rgba(200,162,74,.22);
      --cc-radius:18px;
      --cc-font-disp:"Shippori Mincho","Hiragino Mincho ProN",serif;
      --cc-font-body:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
      position:relative;
      padding:84px 20px 92px;
      background:
        radial-gradient(120% 90% at 80% -10%, rgba(200,162,74,.10) 0%, transparent 55%),
        linear-gradient(180deg, var(--cc-navy) 0%, var(--cc-navy-2) 100%);
      color:var(--cc-cream);
      font-family:var(--cc-font-body);
      overflow:hidden;
    }
    .cc-diag *{box-sizing:border-box;}
    /* subtle decorative grain / compass lines */
    .cc-diag::before{
      content:"";position:absolute;inset:0;pointer-events:none;
      background-image:
        repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 2px, transparent 2px 6px);
      opacity:.6;
    }
    .cc-diag__inner{position:relative;max-width:680px;margin:0 auto;}

    /* ---- head ---- */
    .cc-diag__head{text-align:center;margin-bottom:38px;}
    .cc-diag__eyebrow{
      display:inline-block;font-size:12px;letter-spacing:.22em;
      color:var(--cc-gold-2);border:1px solid var(--cc-line);
      padding:7px 16px;border-radius:999px;margin-bottom:22px;
      background:rgba(200,162,74,.06);
    }
    .cc-diag__title{
      font-family:var(--cc-font-disp);font-weight:600;
      font-size:clamp(28px,6vw,42px);line-height:1.3;margin:0 0 18px;
      color:#fff;letter-spacing:.02em;
    }
    .cc-diag__title em{
      font-style:normal;color:var(--cc-gold-2);
      background:linear-gradient(180deg,transparent 62%, rgba(200,162,74,.28) 62%);
      padding:0 .1em;
    }
    .cc-diag__lead{
      font-size:clamp(14px,3.4vw,16px);line-height:1.95;
      color:var(--cc-muted);margin:0;
    }
    .cc-diag__br{display:none;}
    @media(min-width:560px){.cc-diag__br{display:inline;}}

    /* ---- card ---- */
    .cc-diag__card{
      position:relative;
      background:linear-gradient(180deg, rgba(31,49,96,.55) 0%, rgba(14,27,58,.55) 100%);
      border:1px solid var(--cc-line);
      border-radius:var(--cc-radius);
      padding:clamp(24px,5vw,40px);
      box-shadow:0 30px 70px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04);
      backdrop-filter:blur(6px);
    }
    .cc-diag__card::after{
      content:"";position:absolute;inset:0;border-radius:var(--cc-radius);
      padding:1px;pointer-events:none;
      background:linear-gradient(140deg, rgba(200,162,74,.5), transparent 40%, transparent 70%, rgba(200,162,74,.3));
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite:xor;mask-composite:exclude;
    }

    /* ---- progress ---- */
    .cc-diag__progress{display:flex;align-items:center;gap:14px;margin-bottom:30px;}
    .cc-diag__progress-bar{
      flex:1;height:6px;border-radius:99px;
      background:rgba(255,255,255,.08);overflow:hidden;
    }
    .cc-diag__progress-fill{
      display:block;height:100%;width:14%;border-radius:99px;
      background:linear-gradient(90deg,var(--cc-gold),var(--cc-gold-2));
      transition:width .45s cubic-bezier(.4,0,.2,1);
    }
    .cc-diag__progress-text{
      font-size:13px;color:var(--cc-muted);letter-spacing:.05em;
      font-variant-numeric:tabular-nums;white-space:nowrap;
    }
    .cc-diag__step{color:var(--cc-gold-2);font-weight:700;}

    /* ---- question ---- */
    .cc-diag__stage{min-height:240px;}
    .cc-diag__q{animation:cc-fade .4s ease both;}
    @keyframes cc-fade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
    .cc-diag__q-text{
      font-family:var(--cc-font-disp);font-weight:600;
      font-size:clamp(18px,4.4vw,23px);line-height:1.55;
      margin:0 0 24px;color:#fff;
    }
    .cc-diag__q-num{
      display:block;font-family:var(--cc-font-body);font-size:12px;
      letter-spacing:.2em;color:var(--cc-gold);margin-bottom:10px;font-weight:700;
    }
    .cc-diag__options{display:flex;flex-direction:column;gap:12px;}
    .cc-diag__opt{
      width:100%;text-align:left;cursor:pointer;
      font-family:var(--cc-font-body);font-size:15px;line-height:1.5;
      color:var(--cc-cream);
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.12);
      border-radius:12px;padding:16px 18px;
      display:flex;align-items:center;gap:14px;
      transition:border-color .2s, background .2s, transform .12s;
    }
    .cc-diag__opt:hover{
      border-color:var(--cc-gold);background:rgba(200,162,74,.08);
    }
    .cc-diag__opt:active{transform:scale(.99);}
    .cc-diag__opt-mark{
      flex:0 0 22px;height:22px;border-radius:50%;
      border:1.5px solid var(--cc-muted);position:relative;transition:border-color .2s;
    }
    .cc-diag__opt:hover .cc-diag__opt-mark{border-color:var(--cc-gold);}
    .cc-diag__opt-mark::after{
      content:"";position:absolute;inset:4px;border-radius:50%;
      background:var(--cc-gold);transform:scale(0);transition:transform .2s;
    }
    .cc-diag__opt.is-selected{border-color:var(--cc-gold);background:rgba(200,162,74,.12);}
    .cc-diag__opt.is-selected .cc-diag__opt-mark{border-color:var(--cc-gold);}
    .cc-diag__opt.is-selected .cc-diag__opt-mark::after{transform:scale(1);}

    /* ---- nav ---- */
    .cc-diag__nav{margin-top:26px;display:flex;}
    .cc-diag__back{
      background:none;border:none;cursor:pointer;
      color:var(--cc-muted);font-family:var(--cc-font-body);font-size:14px;
      padding:6px 4px;transition:color .2s;
    }
    .cc-diag__back:hover:not(:disabled){color:var(--cc-gold-2);}
    .cc-diag__back:disabled{opacity:0;pointer-events:none;}

    /* ---- result ---- */
    .cc-diag__result{text-align:center;animation:cc-fade .5s ease both;}
    .cc-diag__result-tag{
      display:inline-block;font-size:12px;letter-spacing:.22em;color:var(--cc-gold-2);
      border:1px solid var(--cc-line);padding:6px 16px;border-radius:999px;margin-bottom:22px;
    }
    .cc-diag__result-icon{
      width:84px;height:84px;margin:0 auto 22px;border-radius:50%;
      display:grid;place-items:center;font-size:38px;
      background:radial-gradient(circle at 30% 25%, var(--cc-navy-3), var(--cc-navy));
      border:1px solid var(--cc-line);
      box-shadow:0 0 0 6px rgba(200,162,74,.05), 0 16px 40px -18px rgba(0,0,0,.8);
    }
    .cc-diag__result-type{
      font-family:var(--cc-font-disp);font-weight:600;
      font-size:clamp(22px,5vw,30px);line-height:1.4;margin:0 0 8px;color:#fff;
    }
    .cc-diag__result-type span{display:block;font-size:13px;letter-spacing:.18em;color:var(--cc-gold);font-family:var(--cc-font-body);margin-bottom:8px;font-weight:700;}
    .cc-diag__result-desc{
      font-size:15px;line-height:1.95;color:var(--cc-muted);
      max-width:480px;margin:0 auto 26px;
    }
    .cc-diag__result-points{
      list-style:none;padding:0;margin:0 auto 30px;max-width:460px;
      text-align:left;display:flex;flex-direction:column;gap:12px;
    }
    .cc-diag__result-points li{
      position:relative;padding:14px 16px 14px 46px;
      background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
      border-radius:10px;font-size:14px;line-height:1.6;color:var(--cc-cream);
    }
    .cc-diag__result-points li::before{
      content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%);
      width:18px;height:18px;border-radius:50%;
      background:linear-gradient(135deg,var(--cc-gold),var(--cc-gold-2));
    }
    .cc-diag__result-points li::after{
      content:"✓";position:absolute;left:20px;top:50%;transform:translateY(-50%);
      font-size:11px;font-weight:900;color:var(--cc-navy);
    }
    .cc-diag__result-cta{display:flex;flex-direction:column;align-items:center;gap:16px;}
    .cc-diag__btn{
      display:inline-block;text-decoration:none;cursor:pointer;
      font-family:var(--cc-font-body);font-weight:700;font-size:16px;letter-spacing:.04em;
      padding:17px 40px;border-radius:999px;border:none;
      transition:transform .15s, box-shadow .25s;
    }
    .cc-diag__btn--gold{
      color:var(--cc-navy);
      background:linear-gradient(135deg,var(--cc-gold-2),var(--cc-gold));
      box-shadow:0 14px 34px -12px rgba(200,162,74,.7);
    }
    .cc-diag__btn--gold:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(200,162,74,.85);}
    .cc-diag__retry{
      background:none;border:none;cursor:pointer;color:var(--cc-muted);
      font-family:var(--cc-font-body);font-size:13px;text-decoration:underline;
      text-underline-offset:3px;transition:color .2s;
    }
    .cc-diag__retry:hover{color:var(--cc-gold-2);}
    .cc-diag__result-note{
      font-size:11px;line-height:1.7;color:rgba(154,166,196,.7);
      margin:24px auto 0;max-width:440px;
    }