/* ============================================================
   Koumuin Career Diagnosis — フロント用スタイル

   design/kcd-prototype.html から移植したもの。
   見た目を勝手に作り直さないこと。

   ・すべてのクラスに .kcd- prefix を付ける
   ・SWELL のクラス（.l- .c- .p- .w-）にスタイルを当てない
   ・!important は原則使わない
   ============================================================ */

.kcd-root{
  /* ---- color tokens ---- */
  --kcd-navy:#23456B;
  --kcd-navy-deep:#1A3352;
  --kcd-blue:#2F80ED;
  --kcd-blue-weak:#EAF2FE;
  --kcd-bg:#FFFFFF;
  --kcd-bg-sub:#F5F8FB;
  --kcd-text:#222222;
  --kcd-text-sub:#5A6B7C;
  --kcd-border:#D8E1EA;
  --kcd-border-strong:#B9C8D6;
  --kcd-line:#06C755;

  /* ---- scale ---- */
  --kcd-radius:10px;
  --kcd-maxw:880px;
  --kcd-gap:16px;

  /* ---- type ---- */
  --kcd-font: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
              "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --kcd-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
              "Courier New", monospace;

  font-family: var(--kcd-font);
  color: var(--kcd-text);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;

  max-width:var(--kcd-maxw);
  margin:0 auto;
  background:var(--kcd-bg);
  overflow-x:hidden;
}

/* box-sizing は診断コンポーネント内に閉じる（SWELL 側へ影響させない）。 */
.kcd-root,
.kcd-root *{ box-sizing:border-box; }

.kcd-root [hidden]{ display:none; }

/* ------------------------------------------------------------
   テーマ（SWELL）の本文装飾を、診断コンポーネントの中だけ打ち消す。

   SWELL は .post_content h2 のようにタグ単位で見出しへ背景・罫線・
   擬似要素を当てている。詳細度が 0,1,1 あるため、こちらが単一クラス
   （0,1,0）のままだと負けて、診断結果の見出しがテーマの装飾で
   塗りつぶされてしまう。

   そこで一度ここで素に戻し、以降のルール（すべて .kcd-root を前置した
   0,2,0 以上）で作り直す。打ち消しはこのブロックの中だけに閉じ、
   SWELL のクラス（.l- .c- .p- .w-）には一切触らない。
   ------------------------------------------------------------ */
.kcd-root h1,
.kcd-root h2,
.kcd-root h3,
.kcd-root h4,
.kcd-root ul,
.kcd-root ol,
.kcd-root li,
.kcd-root p{
  background:none;
  border:0;
  border-radius:0;
  padding:0;
  margin:0;
  text-indent:0;
  list-style:none;
}

.kcd-root h1::before, .kcd-root h1::after,
.kcd-root h2::before, .kcd-root h2::after,
.kcd-root h3::before, .kcd-root h3::after,
.kcd-root h4::before, .kcd-root h4::after,
.kcd-root ul > li::before,
.kcd-root ol > li::before{
  content:none;
  display:none;
}

.kcd-root a{ text-decoration:none; }

/* ---------- 共通パーツ ---------- */
.kcd-root .kcd-tag{
  font-family:var(--kcd-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--kcd-text-sub);
  display:inline-block;
}

.kcd-root .kcd-btn{
  display:block;width:100%;
  padding:17px 20px;
  border:0;border-radius:var(--kcd-radius);
  background:var(--kcd-blue);color:#fff;
  font-family:inherit;font-size:17px;font-weight:700;
  letter-spacing:.02em;
  text-align:center;text-decoration:none;
  cursor:pointer;
  transition:background .15s ease;
}
.kcd-root .kcd-btn:hover{background:#1E6FDC;color:#fff;}
.kcd-root .kcd-btn:focus-visible{outline:3px solid var(--kcd-navy);outline-offset:2px;}
.kcd-root .kcd-btn--ghost{
  background:transparent;color:var(--kcd-navy);
  border:1px solid var(--kcd-border-strong);font-size:15px;padding:13px;
}
.kcd-root .kcd-btn--ghost:hover{background:var(--kcd-bg-sub);color:var(--kcd-navy);}
.kcd-root .kcd-btn--line{background:var(--kcd-line);}
.kcd-root .kcd-btn--line:hover{background:#05B34D;}

.kcd-root .kcd-error{
  margin:14px 0 0;padding:12px 14px;
  border:1px solid #E4A0A0;border-radius:var(--kcd-radius);
  background:#FDF3F3;color:#8A2B2B;font-size:13.5px;
}

/* PR 表記：本文と同等以上の視認性を確保する（極小・薄色にしない）。 */
.kcd-root .kcd-pr-notice{
  font-size:13px;
  color:var(--kcd-text);
  background:var(--kcd-bg-sub);
  border:1px solid var(--kcd-border);
  border-radius:6px;
  padding:10px 14px;
  margin:0 20px 16px;
}

/* ---------- ロゴ帯（既定は非表示。管理画面で ON にしたときのみ） ---------- */
.kcd-root .kcd-logostrip{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:14px 20px 6px;
  border-bottom:1px solid var(--kcd-border);
}
.kcd-root .kcd-logostrip__list{
  display:flex;gap:18px;align-items:center;
  margin:0;padding:0;list-style:none;
  min-width:min-content;
}
.kcd-root .kcd-logostrip__list img{
  display:block;height:auto;max-width:120px;
  filter:grayscale(1);opacity:.8;
}

/* ---------- 1. ファーストビュー ---------- */
.kcd-root .kcd-fv{padding:32px 20px 36px;}
.kcd-root .kcd-fv__eyebrow{
  font-family:var(--kcd-mono);
  font-size:11px;letter-spacing:.16em;color:var(--kcd-blue);
  margin:0 0 18px;
}
.kcd-root .kcd-fv__title{
  font-size:29px;line-height:1.45;font-weight:700;
  letter-spacing:-.01em;margin:0 0 18px;color:var(--kcd-navy);
}
.kcd-root .kcd-fv__title em{
  font-style:normal;
  background:linear-gradient(transparent 62%, var(--kcd-blue-weak) 62%);
}
.kcd-root .kcd-fv__lead{
  font-size:15px;color:var(--kcd-text-sub);margin:0 0 26px;
}
.kcd-root .kcd-fv__promise{
  font-size:13px;color:var(--kcd-text-sub);
  margin:12px 0 0;text-align:center;
}

/* 公務員語 → 民間語 の「変換」装置 */
.kcd-root .kcd-conv{
  border:1px solid var(--kcd-border);
  border-left:3px solid var(--kcd-navy);
  border-radius:0 var(--kcd-radius) var(--kcd-radius) 0;
  background:var(--kcd-bg-sub);
  padding:16px 18px;
  margin:0 0 28px;
}
.kcd-root .kcd-conv__label{
  font-family:var(--kcd-mono);font-size:10px;letter-spacing:.14em;
  color:var(--kcd-text-sub);display:block;margin-bottom:10px;
}
.kcd-root .kcd-conv__row{
  display:flex;align-items:center;gap:12px;
  min-height:52px;
}
.kcd-root .kcd-conv__from,.kcd-root .kcd-conv__to{
  flex:1;font-size:14px;line-height:1.5;
  transition:opacity .35s ease;
}
.kcd-root .kcd-conv__from{color:var(--kcd-text-sub);}
.kcd-root .kcd-conv__to{color:var(--kcd-navy);font-weight:700;}
.kcd-root .kcd-conv__arrow{
  flex:0 0 auto;color:var(--kcd-blue);font-size:15px;
}
.kcd-root .kcd-conv.is-swapping .kcd-conv__from,
.kcd-root .kcd-conv.is-swapping .kcd-conv__to{opacity:0;}

.kcd-root .kcd-fv__meta{
  display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;
  padding:0;list-style:none;
}
.kcd-root .kcd-fv__meta li{
  font-size:12px;color:var(--kcd-text-sub);
  border:1px solid var(--kcd-border);border-radius:100px;
  padding:5px 12px;
}
.kcd-root .kcd-resume{margin:18px 0 0;}

/* ---------- 2. 設問 ---------- */
.kcd-root .kcd-quiz{padding:20px 20px 40px;}
.kcd-root .kcd-progress{margin:0 0 26px;}
.kcd-root .kcd-progress__head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:8px;
}
.kcd-root .kcd-progress__count{
  font-family:var(--kcd-mono);font-size:12px;letter-spacing:.1em;
  color:var(--kcd-navy);font-weight:700;
}
.kcd-root .kcd-progress__label{font-size:11px;color:var(--kcd-text-sub);}
.kcd-root .kcd-progress__track{
  height:3px;background:var(--kcd-border);border-radius:2px;overflow:hidden;
}
.kcd-root .kcd-progress__bar{
  height:100%;width:0;background:var(--kcd-blue);
  transition:width .3s cubic-bezier(.4,0,.2,1);
}

/* 設問切替でレイアウトが跳ねないよう、高さを確保する（CLS 対策）。 */
.kcd-root .kcd-q{min-height:430px;}
.kcd-root .kcd-q__num{
  font-family:var(--kcd-mono);font-size:11px;letter-spacing:.16em;
  color:var(--kcd-blue);display:block;margin-bottom:10px;
}
.kcd-root .kcd-q__title{
  font-size:21px;line-height:1.55;font-weight:700;
  color:var(--kcd-navy);margin:0 0 22px;
}
.kcd-root .kcd-q__title:focus{outline:none;}
.kcd-root .kcd-opts{display:grid;gap:10px;margin:0 0 24px;}
@media(min-width:640px){
  .kcd-root .kcd-opts--grid2{grid-template-columns:1fr 1fr;}
}
.kcd-root .kcd-opt{
  display:flex;align-items:center;gap:12px;
  min-height:56px;padding:14px 16px;
  border:1px solid var(--kcd-border);border-radius:var(--kcd-radius);
  background:#fff;font-family:inherit;font-size:15.5px;line-height:1.45;
  color:var(--kcd-text);text-align:left;cursor:pointer;width:100%;
  transition:border-color .12s ease, background .12s ease;
}
.kcd-root .kcd-opt:hover{border-color:var(--kcd-blue);background:var(--kcd-blue-weak);}
.kcd-root .kcd-opt:focus-visible{outline:3px solid var(--kcd-navy);outline-offset:2px;}
.kcd-root .kcd-opt__mark{
  flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--kcd-border-strong);
  position:relative;
}
.kcd-root .kcd-opt[aria-checked="true"]{
  border-color:var(--kcd-navy);background:var(--kcd-blue-weak);font-weight:700;
}
.kcd-root .kcd-opt[aria-checked="true"] .kcd-opt__mark{
  border-color:var(--kcd-navy);background:var(--kcd-navy);
}
.kcd-root .kcd-opt[aria-checked="true"] .kcd-opt__mark::after{
  content:"";position:absolute;left:6px;top:2.5px;
  width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

.kcd-root .kcd-back{
  background:none;border:0;padding:8px 0;cursor:pointer;
  font-family:inherit;font-size:14px;color:var(--kcd-text-sub);
}
.kcd-root .kcd-back:hover{color:var(--kcd-navy);text-decoration:underline;}

/* ---------- 3. 確認 ---------- */
.kcd-root .kcd-review{padding:24px 20px 40px;}
.kcd-root .kcd-review__list{
  border-top:1px solid var(--kcd-border);margin:0 0 24px;padding:0;list-style:none;
}
.kcd-root .kcd-review__item{
  display:flex;gap:12px;align-items:baseline;
  border-bottom:1px solid var(--kcd-border);padding:11px 0;
}
.kcd-root .kcd-review__q{
  flex:0 0 96px;font-family:var(--kcd-mono);font-size:11px;
  color:var(--kcd-text-sub);letter-spacing:.06em;
}
.kcd-root .kcd-review__a{flex:1;font-size:14.5px;}
.kcd-root .kcd-review__edit{
  background:none;border:0;padding:4px;cursor:pointer;
  font-family:inherit;font-size:12px;color:var(--kcd-blue);
}

/* ---------- 4. 分析中 ---------- */
.kcd-root .kcd-loading{
  padding:120px 20px;text-align:center;
}
.kcd-root .kcd-loading__text{font-size:15px;color:var(--kcd-text-sub);margin:0 0 20px;}
.kcd-root .kcd-loading__track{
  height:2px;background:var(--kcd-border);max-width:200px;margin:0 auto;
  overflow:hidden;position:relative;
}
.kcd-root .kcd-loading__track::after{
  content:"";position:absolute;inset:0;width:40%;background:var(--kcd-blue);
  animation:kcdSlide 1s linear infinite;
}
@keyframes kcdSlide{from{transform:translateX(-100%);}to{transform:translateX(350%);}}

/* ---------- 5. 結果 ---------- */
.kcd-root .kcd-result{padding:0 0 48px;}
.kcd-root .kcd-result__hero{
  background:var(--kcd-navy);color:#fff;padding:36px 20px 32px;
}
.kcd-root .kcd-result__eyebrow{
  font-family:var(--kcd-mono);font-size:10.5px;letter-spacing:.18em;
  color:#9FBEDD;margin:0 0 12px;
}
.kcd-root .kcd-result__type{
  font-size:30px;font-weight:700;line-height:1.35;margin:0 0 14px;
  letter-spacing:-.01em;color:#fff;
}
.kcd-root .kcd-result__summary{
  font-size:14.5px;line-height:1.85;color:#D7E4F0;margin:0;
}

.kcd-root .kcd-sec{padding:32px 20px 0;}
.kcd-root .kcd-sec__title{
  font-size:16px;font-weight:700;color:var(--kcd-navy);
  margin:0 0 4px;
}
.kcd-root .kcd-sec__note{font-size:12.5px;color:var(--kcd-text-sub);margin:0 0 16px;}
.kcd-root .kcd-body{font-size:14.5px;line-height:1.9;margin:0 0 16px;}

/* 適性スコア */
.kcd-root .kcd-traits{margin:0;padding:0;list-style:none;}
.kcd-root .kcd-trait{
  display:flex;align-items:center;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--kcd-border);
}
.kcd-root .kcd-trait__name{flex:0 0 84px;font-size:13.5px;color:var(--kcd-text-sub);}
.kcd-root .kcd-trait__bar{
  flex:1;height:6px;background:var(--kcd-bg-sub);border-radius:3px;overflow:hidden;
}
.kcd-root .kcd-trait__fill{
  height:100%;background:var(--kcd-blue);border-radius:3px;
  transition:width .6s cubic-bezier(.4,0,.2,1);width:0;
}
.kcd-root .kcd-trait__val{
  flex:0 0 auto;text-align:right;white-space:nowrap;
  font-size:12px;letter-spacing:1px;color:var(--kcd-blue);
}

/* 職種カード */
.kcd-root .kcd-jobs{margin:0;padding:0;list-style:none;display:grid;gap:12px;}
.kcd-root .kcd-job{
  border:1px solid var(--kcd-border);border-radius:var(--kcd-radius);
  padding:16px 18px;background:#fff;
}
.kcd-root .kcd-job__head{
  display:flex;align-items:baseline;gap:10px;margin-bottom:8px;
}
.kcd-root .kcd-job__rank{
  font-family:var(--kcd-mono);font-size:11px;letter-spacing:.1em;
  color:var(--kcd-blue);flex:0 0 auto;
}
.kcd-root .kcd-job__name{font-size:18px;font-weight:700;color:var(--kcd-navy);flex:1;}
.kcd-root .kcd-job__score{
  font-family:var(--kcd-mono);font-size:15px;font-weight:700;color:var(--kcd-blue);
}
.kcd-root .kcd-job__lead{font-size:13.5px;color:var(--kcd-text-sub);margin:0;line-height:1.7;}

.kcd-root .kcd-job--locked{
  background:var(--kcd-bg-sub);border-style:dashed;
  display:flex;align-items:center;gap:12px;padding:15px 18px;
}
.kcd-root .kcd-job--locked .kcd-job__rank{color:var(--kcd-border-strong);}
.kcd-root .kcd-job__locked-text{
  font-size:14px;color:var(--kcd-text-sub);flex:1;
}
.kcd-root .kcd-lock{
  width:14px;height:14px;flex:0 0 auto;fill:none;
  stroke:var(--kcd-border-strong);stroke-width:2;
}

/* ティザー */
.kcd-root .kcd-teaser{
  background:var(--kcd-bg-sub);border-radius:var(--kcd-radius);
  padding:20px 18px;margin-top:8px;
}
.kcd-root .kcd-teaser__title{
  font-size:14.5px;font-weight:700;color:var(--kcd-navy);margin:0 0 12px;
}
.kcd-root .kcd-teaser__list{margin:0;padding:0;list-style:none;display:grid;gap:7px;}
.kcd-root .kcd-teaser__list li{
  font-size:13.5px;color:var(--kcd-text);
  padding-left:22px;position:relative;line-height:1.6;
}
.kcd-root .kcd-teaser__list li::before{
  content:"";position:absolute;left:4px;top:7px;
  width:5px;height:9px;border:solid var(--kcd-blue);
  border-width:0 2px 2px 0;transform:rotate(45deg);
}

/* 診断キーワード ＝ 受付番号のメタファー */
.kcd-root .kcd-code{
  border:1px solid var(--kcd-navy);border-radius:var(--kcd-radius);
  padding:18px;text-align:center;margin-top:8px;
}
.kcd-root .kcd-code__label{
  font-family:var(--kcd-mono);font-size:10.5px;letter-spacing:.16em;
  color:var(--kcd-text-sub);display:block;margin-bottom:8px;
}
.kcd-root .kcd-code__value{
  font-family:var(--kcd-mono);font-size:34px;font-weight:700;
  letter-spacing:.22em;color:var(--kcd-navy);
  margin:0 0 14px;text-indent:.22em;
}
.kcd-root .kcd-code__copy{
  border:1px solid var(--kcd-border-strong);background:#fff;
  border-radius:6px;padding:9px 20px;cursor:pointer;
  font-family:inherit;font-size:13.5px;color:var(--kcd-navy);
}
.kcd-root .kcd-code__copy:hover{background:var(--kcd-bg-sub);}
.kcd-root .kcd-code__copy.is-done{border-color:var(--kcd-line);color:var(--kcd-line);}

/* LINE 導線 */
.kcd-root .kcd-line-box{
  border:1px solid var(--kcd-border);border-radius:var(--kcd-radius);
  padding:20px 18px;margin-top:8px;
}
.kcd-root .kcd-steps{
  margin:0 0 18px;padding:0;list-style:none;counter-reset:kcdstep;
}
.kcd-root .kcd-steps li{
  counter-increment:kcdstep;position:relative;padding-left:30px;
  font-size:13.5px;line-height:1.6;margin-bottom:9px;
}
.kcd-root .kcd-steps li::before{
  content:counter(kcdstep);
  position:absolute;left:0;top:2px;
  width:20px;height:20px;border-radius:50%;
  background:var(--kcd-navy);color:#fff;
  font-family:var(--kcd-mono);font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

.kcd-root .kcd-disclaimer{
  font-size:11.5px;color:var(--kcd-text-sub);line-height:1.7;
  padding:28px 20px 0;margin:0;
}

/* ============================================================
   完全版結果
   ============================================================ */
.kcd-root--full{padding-bottom:48px;}

.kcd-root .kcd-jobs--full{counter-reset:none;}
.kcd-root .kcd-jobs--full .kcd-job{padding:18px 18px 6px;}
.kcd-root .kcd-job__block{margin:0 0 14px;}
.kcd-root .kcd-job__block--caution{
  background:var(--kcd-bg-sub);border-radius:8px;padding:12px 14px;
}
.kcd-root .kcd-job__label{
  font-size:12px;font-weight:700;color:var(--kcd-blue);
  margin:0 0 6px;letter-spacing:.02em;
}
.kcd-root .kcd-job__text{
  font-size:13.5px;line-height:1.85;margin:0;color:var(--kcd-text);
}

.kcd-root .kcd-strengths{margin-top:4px;}

.kcd-root .kcd-cards-list{margin:0;padding:0;list-style:none;display:grid;gap:12px;}
.kcd-root .kcd-card-item{
  border:1px solid var(--kcd-border);border-radius:var(--kcd-radius);
  padding:16px 18px;background:#fff;
}
.kcd-root .kcd-card-item--accent{
  border-left:3px solid var(--kcd-navy);background:var(--kcd-bg-sub);
}
.kcd-root .kcd-card-item--caution{background:var(--kcd-bg-sub);}
.kcd-root .kcd-card-item__title{
  font-size:15.5px;font-weight:700;color:var(--kcd-navy);margin:0 0 8px;
}
.kcd-root .kcd-card-item__text{
  font-size:13.5px;line-height:1.85;color:var(--kcd-text);margin:0;
}

/* 転職サービス（完全版のクライマックス） */
.kcd-root .kcd-sec--services{padding-top:40px;}
.kcd-root .kcd-services{margin:0;padding:0;list-style:none;display:grid;gap:16px;}
.kcd-root .kcd-service{
  border:1px solid var(--kcd-border-strong);border-radius:var(--kcd-radius);
  padding:20px 18px;background:#fff;
}
.kcd-root .kcd-service__head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;
}
.kcd-root .kcd-service__logo{display:block;height:auto;max-width:120px;}
.kcd-root .kcd-service__name{
  font-size:18px;font-weight:700;color:var(--kcd-navy);margin:0;
}
.kcd-root .kcd-service__catch{
  font-size:13.5px;color:var(--kcd-text-sub);margin:0 0 12px;line-height:1.7;
}
.kcd-root .kcd-service__features{
  margin:0 0 14px;padding:0;list-style:none;display:grid;gap:6px;
}
.kcd-root .kcd-service__features li{
  font-size:13.5px;padding-left:20px;position:relative;line-height:1.6;
}
.kcd-root .kcd-service__features li::before{
  content:"";position:absolute;left:3px;top:7px;
  width:5px;height:9px;border:solid var(--kcd-blue);
  border-width:0 2px 2px 0;transform:rotate(45deg);
}
.kcd-root .kcd-service__reason{
  background:var(--kcd-blue-weak);border-radius:8px;
  padding:12px 14px;margin:0 0 16px;
}
.kcd-root .kcd-service__text{
  font-size:13.5px;line-height:1.8;margin:4px 0 0;
}
.kcd-root .kcd-service__link{margin-top:4px;}

.kcd-root .kcd-footer-notice{
  padding:20px 20px 0;font-size:12px;color:var(--kcd-text-sub);line-height:1.8;
}

/* ============================================================
   記事内 CTA
   ============================================================ */
.kcd-root--cta{max-width:100%;}
.kcd-root .kcd-cta{
  border:1px solid var(--kcd-border-strong);border-radius:var(--kcd-radius);
  padding:24px 20px;background:var(--kcd-bg-sub);
}
.kcd-root .kcd-cta__eyebrow{
  font-family:var(--kcd-mono);font-size:10.5px;letter-spacing:.16em;
  color:var(--kcd-blue);margin:0 0 10px;
}
.kcd-root .kcd-cta__title{
  font-size:19px;font-weight:700;color:var(--kcd-navy);
  line-height:1.5;margin:0 0 10px;
}
.kcd-root .kcd-cta__text{
  font-size:13.5px;color:var(--kcd-text-sub);margin:0 0 18px;line-height:1.7;
}

/* ============================================================
   モーションの抑制
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .kcd-root *{
    animation-duration:.01ms;
    animation-iteration-count:1;
    transition-duration:.01ms;
  }
}

/* 管理者プレビューの帯（一般の閲覧者には出ない） */
.kcd-root .kcd-preview-bar{
  background:#FFF4CE;border:1px solid #E0C56B;color:#6B5310;
  font-size:13px;line-height:1.7;
  padding:12px 16px;margin:0 20px 16px;border-radius:6px;
}

/* 無料であることの明示（完全版ティザーの下） */
.kcd-root .kcd-teaser__free{
  margin:14px 0 0;
  padding-top:12px;
  border-top:1px solid var(--kcd-border);
  font-size:12.5px;
  line-height:1.7;
  color:var(--kcd-navy);
  font-weight:700;
}

/* ------------------------------------------------------------
   伏せた上位順位（1位・2位）の行

   上位を伏せる設計にしたことで、この行は「使えない項目」ではなく
   「これから開く項目」になった。灰色のままだと無効表示に見えるため、
   淡い青地＋青の破線にして、中身があることを示す。
   ------------------------------------------------------------ */
.kcd-root .kcd-job--locked{
  background:var(--kcd-blue-weak);
  border-color:var(--kcd-blue);
}
.kcd-root .kcd-job--locked .kcd-job__rank{ color:var(--kcd-blue); }
.kcd-root .kcd-job__locked-text{ color:var(--kcd-navy); font-weight:700; }
.kcd-root .kcd-lock{ stroke:var(--kcd-blue); }

/* ============================================================
   診断トップの追加セクション

   すべて #scr-fv の中にあるため、診断が始まると一緒に消える。
   セレクタは .kcd-root 前置（SWELL に負けないため）。
   ============================================================ */

/* ---------- 利用者の声（横に流れる帯） ---------- */
.kcd-root .kcd-voices{
  /* .kcd-fv の左右パディング20pxを打ち消して全幅の帯にする */
  margin:34px -20px 0;
  padding:18px 0 20px;
  background:var(--kcd-bg-sub);
  border-top:1px solid var(--kcd-border);
  border-bottom:1px solid var(--kcd-border);
}
.kcd-root .kcd-voices__head{
  font-family:var(--kcd-mono);
  font-size:10.5px;letter-spacing:.16em;
  color:var(--kcd-text-sub);
  padding:0 20px;margin:0 0 12px;
}
.kcd-root .kcd-voices__viewport{
  overflow:hidden;
  padding:0 20px;
}
.kcd-root .kcd-voices__track{
  display:flex;
  width:max-content;
  margin:0;padding:0;list-style:none;
  /* 同じ並びを2周ぶん出しているので、-50% で継ぎ目なくループする */
  animation:kcdVoices var(--kcd-voices-duration,42s) linear infinite;
}
.kcd-root .kcd-voices:hover .kcd-voices__track,
.kcd-root .kcd-voices:focus-within .kcd-voices__track{
  animation-play-state:paused;
}
.kcd-root .kcd-voice{
  /* gap ではなく margin にする。gap だと2周ぶんの幅がちょうど半分にならず継ぎ目がずれる */
  flex:0 0 auto;
  width:274px;
  margin:0 12px 0 0;
  padding:14px 16px;
  background:#fff;
  border:1px solid var(--kcd-border);
  border-radius:var(--kcd-radius);
}
.kcd-root .kcd-voice__text{
  font-size:13.5px;line-height:1.75;
  color:var(--kcd-text);margin:0 0 8px;
}
.kcd-root .kcd-voice__meta{
  font-size:11.5px;color:var(--kcd-text-sub);margin:0;
}
@keyframes kcdVoices{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ---------- 追加セクション共通 ---------- */
.kcd-root .kcd-lp{padding:44px 0 0;}
.kcd-root .kcd-lp__title{
  font-size:19px;font-weight:700;line-height:1.5;
  color:var(--kcd-navy);text-align:center;margin:0 0 8px;
}
.kcd-root .kcd-lp__lead{
  font-size:13.5px;line-height:1.8;
  color:var(--kcd-text-sub);text-align:center;margin:0 0 22px;
}

/* ---------- この診断で分かること ---------- */
.kcd-root .kcd-know{
  display:grid;gap:14px;margin:0;padding:0;list-style:none;
}
@media(min-width:640px){
  .kcd-root .kcd-know{grid-template-columns:1fr 1fr;}
}
.kcd-root .kcd-know__item{
  border:1px solid var(--kcd-border);
  border-radius:var(--kcd-radius);
  background:#fff;padding:18px;
}
.kcd-root .kcd-know__no{
  display:block;
  font-family:var(--kcd-mono);font-size:11px;letter-spacing:.16em;
  color:var(--kcd-blue);margin:0 0 8px;
}
.kcd-root .kcd-know__name{
  font-size:16px;font-weight:700;line-height:1.5;
  color:var(--kcd-navy);margin:0 0 8px;
}
.kcd-root .kcd-know__text{
  font-size:13.5px;line-height:1.85;margin:0 0 12px;
}
.kcd-root .kcd-know__use{
  font-size:12.5px;line-height:1.75;
  color:var(--kcd-text-sub);
  background:var(--kcd-bg-sub);
  border-radius:8px;padding:11px 13px;margin:0;
}
.kcd-root .kcd-know__useLabel{
  display:block;font-size:11px;font-weight:700;
  color:var(--kcd-navy);margin-bottom:3px;
}

/* ---------- 診断の流れ ---------- */
.kcd-root .kcd-flow{
  display:grid;gap:12px;margin:0;padding:0;list-style:none;
}
.kcd-root .kcd-flow__item{
  display:flex;gap:14px;align-items:flex-start;
  border:1px solid var(--kcd-border);
  border-radius:var(--kcd-radius);
  background:#fff;padding:16px 18px;
}
.kcd-root .kcd-flow__no{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:var(--kcd-navy);color:#fff;
  font-family:var(--kcd-mono);font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  margin-top:2px;
}
.kcd-root .kcd-flow__name{
  font-size:15px;font-weight:700;color:var(--kcd-navy);margin:0 0 4px;
}
.kcd-root .kcd-flow__text{
  font-size:13px;line-height:1.75;color:var(--kcd-text-sub);margin:0;
}

/* ---------- よくある質問 ---------- */
.kcd-root .kcd-faq{display:grid;gap:10px;}
.kcd-root .kcd-faq__item{
  border:1px solid var(--kcd-border);
  border-radius:var(--kcd-radius);
  background:#fff;
}
.kcd-root .kcd-faq__q{
  position:relative;
  font-size:14px;font-weight:700;line-height:1.6;
  color:var(--kcd-navy);
  padding:14px 44px 14px 16px;
  cursor:pointer;list-style:none;
}
.kcd-root .kcd-faq__q::-webkit-details-marker{display:none;}
.kcd-root .kcd-faq__q:focus-visible{outline:3px solid var(--kcd-navy);outline-offset:-3px;}
.kcd-root .kcd-faq__q::after{
  content:"";position:absolute;right:18px;top:50%;
  width:8px;height:8px;
  border-right:2px solid var(--kcd-blue);
  border-bottom:2px solid var(--kcd-blue);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .2s ease;
}
.kcd-root .kcd-faq__item[open] .kcd-faq__q::after{
  transform:translateY(-25%) rotate(-135deg);
}
.kcd-root .kcd-faq__a{
  font-size:13px;line-height:1.85;
  color:var(--kcd-text);margin:0;padding:0 16px 16px;
}

/* ---------- 下部CTA ---------- */
.kcd-root .kcd-lp--cta{
  margin-top:44px;
  padding:26px 20px 22px;
  background:var(--kcd-bg-sub);
  border:1px solid var(--kcd-border);
  border-radius:var(--kcd-radius);
  text-align:center;
}
.kcd-root .kcd-lp__ctaTitle{
  font-size:16px;font-weight:700;line-height:1.6;
  color:var(--kcd-navy);margin:0 0 16px;
}
.kcd-root .kcd-fv__meta--center{justify-content:center;}

/* 動きを抑える設定のときは帯を止めて、指で横スクロールできるようにする */
@media (prefers-reduced-motion: reduce){
  .kcd-root .kcd-voices__track{animation:none;}
  .kcd-root .kcd-voices__viewport{overflow-x:auto;}
}

/* ---------- コラム・姉妹サイトへの導線 ---------- */
.kcd-root .kcd-sister,
.kcd-root .kcd-column{
  margin:36px 0 0;
  padding:22px 20px;
  border:1px solid var(--kcd-border);
  border-top:3px solid var(--kcd-navy);
  border-radius:var(--kcd-radius);
  background:#fff;
}
.kcd-root .kcd-sister__label,
.kcd-root .kcd-column__label{
  font-family:var(--kcd-mono);
  font-size:10.5px;letter-spacing:.16em;
  color:var(--kcd-text-sub);margin:0 0 8px;
}
.kcd-root .kcd-sister__title,
.kcd-root .kcd-column__title{
  font-size:17px;font-weight:700;line-height:1.5;
  color:var(--kcd-navy);margin:0 0 8px;
}
.kcd-root .kcd-sister__text,
.kcd-root .kcd-column__text{
  font-size:13px;line-height:1.8;
  color:var(--kcd-text-sub);margin:0 0 14px;
}
.kcd-root .kcd-sister__link,
.kcd-root .kcd-column__link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:700;
  color:var(--kcd-blue);
  text-decoration:none;
}
.kcd-root .kcd-sister__link::after,
.kcd-root .kcd-column__link::after{
  content:"";
  width:6px;height:6px;
  border-right:2px solid currentColor;
  border-top:2px solid currentColor;
  transform:rotate(45deg);
}
.kcd-root .kcd-sister__link:hover,
.kcd-root .kcd-column__link:hover{text-decoration:underline;}
.kcd-root .kcd-sister__link:focus-visible,
.kcd-root .kcd-column__link:focus-visible{outline:3px solid var(--kcd-navy);outline-offset:3px;}

/* ============================================================
   横幅と余白の最適化

   ・PC：コンテンツ幅を 880px に広げて、左右の余りを減らす
   ・ボタンは幅いっぱいだと間延びするので上限を設ける
   ・スマホ：ファーストビュー上部の余白を詰める
   ============================================================ */

/*
 * ファーストビューは「読ませる」ブロックなので、コンテナ（880px）いっぱいに
 * 広げず 680px の一列にまとめて中央に置く。
 * 文字が左揃えなのにボタンだけ中央、という崩れを防ぐため、
 * 見出しからボタンまで同じ幅・同じ左端に揃える。
 * その下のカード群（利用者の声・分かること等）は880pxいっぱいを使う。
 */
.kcd-root .kcd-fv__eyebrow,
.kcd-root .kcd-fv__title,
.kcd-root .kcd-fv__lead,
.kcd-root .kcd-conv,
.kcd-root .kcd-fv__promise,
.kcd-root .kcd-fv__meta,
.kcd-root .kcd-resume,
.kcd-root .kcd-fv > .kcd-btn{
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
}

/* ボタンは広い画面で伸びすぎないようにする（スマホでは従来どおり全幅） */
.kcd-root .kcd-btn{
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
}

/* 設問・確認・結果は読みやすさ優先で、従来どおりの幅に保つ */
.kcd-root .kcd-quiz,
.kcd-root .kcd-review,
.kcd-root .kcd-result{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}

@media (max-width:600px){
  .kcd-root .kcd-fv{padding-top:18px;}
  .kcd-root .kcd-fv__title{font-size:26px;}
}

/* コラムブロックは姉妹サイトブロックのすぐ上に並ぶため、間隔を詰める */
.kcd-root .kcd-column + .kcd-sister{margin-top:16px;}

/* ============================================================
   完全版のサンプルレポート（折りたたみ）
   ============================================================ */
.kcd-root .kcd-sample{
  margin:20px 0 0;
  text-align:left;
}
.kcd-root .kcd-sample__details{
  border:1px solid var(--kcd-border);
  border-radius:var(--kcd-radius);
  background:#fff;
  overflow:hidden;
}
.kcd-root .kcd-sample__summary{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;
  cursor:pointer;
  list-style:none;
  font-size:14px;
  color:var(--kcd-navy);
}
.kcd-root .kcd-sample__summary::-webkit-details-marker{display:none;}
.kcd-root .kcd-sample__summary::after{
  content:"";
  margin-left:auto;
  width:8px;height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .2s;
}
.kcd-root .kcd-sample__details[open] .kcd-sample__summary::after{
  transform:rotate(-135deg);
}
.kcd-root .kcd-sample__summary-label{
  flex:0 0 auto;
  padding:3px 9px;
  border-radius:999px;
  background:var(--kcd-blue-weak);
  color:var(--kcd-blue);
  font-size:11.5px;font-weight:700;
}
.kcd-root .kcd-sample__summary-text{font-weight:700;}
.kcd-root .kcd-sample__body{
  padding:0 16px 18px;
  border-top:1px solid var(--kcd-border);
}
.kcd-root .kcd-sample__notice{
  margin:14px 0 16px;
  padding:10px 12px;
  border-left:3px solid var(--kcd-blue);
  background:var(--kcd-blue-weak);
  border-radius:0 6px 6px 0;
  font-size:12.5px;line-height:1.8;
  color:var(--kcd-navy);
}
.kcd-root .kcd-sample__notice--foot{margin-bottom:0;}
.kcd-root .kcd-sample__hero{
  padding:16px;
  border-radius:8px;
  background:var(--kcd-navy);
  color:#fff;
}
.kcd-root .kcd-sample__eyebrow{
  font-family:var(--kcd-mono);
  font-size:10px;letter-spacing:.18em;
  opacity:.75;margin:0 0 6px;
}
.kcd-root .kcd-sample__type{font-size:20px;font-weight:700;margin:0 0 6px;}
.kcd-root .kcd-sample__lead{font-size:12.5px;opacity:.85;margin:0;}
.kcd-root .kcd-sample__sec{margin:18px 0 0;}
.kcd-root .kcd-sample__title{
  font-size:14px;font-weight:700;
  color:var(--kcd-navy);
  margin:0 0 6px;
  padding-left:9px;
  border-left:3px solid var(--kcd-navy);
}
.kcd-root .kcd-sample__note{
  font-size:11.5px;color:var(--kcd-text-sub);margin:0 0 8px;
}
.kcd-root .kcd-sample__text{font-size:13px;line-height:1.85;margin:0;}
.kcd-root .kcd-sample__list{
  margin:0;padding-left:1.15em;
  font-size:13px;line-height:1.85;
}
.kcd-root .kcd-sample__list li{margin-bottom:4px;}
.kcd-root .kcd-sample__job{
  margin-top:10px;padding:12px;
  border:1px solid var(--kcd-border);
  border-radius:8px;
}
.kcd-root .kcd-sample__job-head{
  display:flex;align-items:baseline;gap:8px;
  margin:0 0 8px;flex-wrap:wrap;
}
.kcd-root .kcd-sample__rank{
  font-family:var(--kcd-mono);
  font-size:11px;font-weight:700;
  color:#fff;background:var(--kcd-navy);
  padding:2px 7px;border-radius:4px;
}
.kcd-root .kcd-sample__job-name{font-size:15px;font-weight:700;}
.kcd-root .kcd-sample__score{
  margin-left:auto;
  font-family:var(--kcd-mono);
  font-size:14px;font-weight:700;
  color:var(--kcd-blue);
}
.kcd-root .kcd-sample__dl{margin:0;font-size:12.5px;line-height:1.8;}
.kcd-root .kcd-sample__dl dt{
  font-weight:700;color:var(--kcd-navy);margin-top:8px;
}
.kcd-root .kcd-sample__dl dt:first-child{margin-top:0;}
.kcd-root .kcd-sample__dl dd{margin:2px 0 0;color:var(--kcd-text-sub);}
.kcd-root .kcd-sample__more{
  margin:10px 0 0;font-size:11.5px;
  color:var(--kcd-text-sub);text-align:center;
}
.kcd-root .kcd-sample__service{
  margin-top:8px;padding:12px;
  border:1px dashed var(--kcd-border-strong);
  border-radius:8px;
}
.kcd-root .kcd-sample__service-name{
  font-size:14px;font-weight:700;margin:0 0 6px;color:var(--kcd-navy);
}