/* スキルの詳細ページ(v052)。色と文字は guide.v040.css(概要ページ)に合わせ、分類ごとの色 --sk-acc を1つだけ足す。暗い面は使わない */
.sk-body{background:#fbfbf8}
.sk{max-width:1056px;margin:auto;padding:22px 32px 72px}
.sk-crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:13px;color:#5b6d78;margin-bottom:22px}
.sk-crumbs a{color:#3f6c85;text-decoration:none}.sk-crumbs a:hover{text-decoration:underline}
.sk-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:36px;align-items:center}
.sk-hero-copy .eyebrow{color:var(--sk-acc);margin:0}
.sk-hero h1{margin:6px 0 10px;font-size:clamp(32px,4.4vw,52px);line-height:1.25;letter-spacing:-.03em}
.sk-catch{font-size:clamp(19px,2.2vw,24px);font-weight:750;line-height:1.6;letter-spacing:-.01em;margin:0 0 14px;text-wrap:balance}
.sk-lead{font-size:16px;color:#34505f;margin:0 0 16px}
.sk-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.sk-meta span{font:600 12.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#3a5566;background:#eef3f5;border-radius:999px;padding:7px 11px}
.sk-hero-art{margin:0;border-radius:22px;overflow:hidden;box-shadow:0 24px 50px -30px rgba(24,50,68,.45)}
.sk-hero-art img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.sk-for{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:34px 0 0;padding:18px 22px;border-radius:16px;background:#fff;border:1px solid var(--line);font-size:16px;font-weight:600}
.sk-for span{font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--sk-acc)}
.sk-sec{padding:44px 0 0}
.sk-sec h2{font-size:clamp(22px,2.6vw,28px);margin:0 0 18px}
.sk-can{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sk-can li{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 20px 18px;min-width:0}
.sk-can-n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--sk-acc);color:#fff;font-weight:800;font-size:14px;margin-bottom:10px}
.sk-can p{margin:0;font-size:16px;font-weight:650;line-height:1.7}
.sk-steps{list-style:none;margin:0;padding:0;counter-reset:st;display:grid;gap:10px}
.sk-steps li{counter-increment:st;display:grid;grid-template-columns:44px minmax(0,8.5em) minmax(0,1fr);align-items:baseline;gap:12px;padding:14px 18px;background:#fff;border:1px solid var(--line);border-radius:14px}
.sk-steps li::before{content:counter(st,decimal-leading-zero);font:700 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--sk-acc)}
.sk-steps b{font-size:15.5px}.sk-steps span{color:#3c5462;font-size:15px}
.sk-gets{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.sk-gets p{margin:0;font-size:13px;font-weight:700;color:#5b6d78}
.sk-gets ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.sk-gets li{font-size:14px;font-weight:650;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 13px}
.sk-example{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:22px;align-items:center;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:20px;padding:14px;transition:transform .2s,box-shadow .2s}
.sk-example:hover{transform:translateY(-3px);box-shadow:0 18px 36px -24px rgba(24,50,68,.45)}
.sk-example img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block;background:#eef1f3}
.sk-example-copy{display:grid;gap:6px}.sk-example small{font-size:13px;color:#5b6d78}.sk-example strong{font-size:19px;line-height:1.5}
.sk-go{color:var(--sk-acc);font-weight:700;font-size:15px}
.sk-pairs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sk-pair{display:grid;gap:6px;align-content:start;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;min-height:44px;transition:transform .2s,border-color .2s}
.sk-pair:hover{transform:translateY(-2px);border-color:var(--sk-acc)}
.sk-pair small{font-size:12.5px;color:#5b6d78}.sk-pair strong{font-size:17px}.sk-pair span{font-size:14px;color:#3c5462;line-height:1.7}
.sk-cta{margin-top:56px;padding:34px 30px;border-radius:24px;text-align:center;background:linear-gradient(135deg,#eef5ff,#fdf2ec)}
.sk-cta h2{font-size:clamp(22px,2.8vw,30px);margin:6px 0 18px}
.sk-pill{display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:12px 26px;border-radius:999px;background:#0768cc;color:#fff;font-weight:700;text-decoration:none}
.sk-pill:hover{background:#005bb9}
.sk-note{font-size:13px;color:#526873;margin:16px auto 0;max-width:640px}
@media(max-width:760px){
  .sk{padding:14px 20px 56px}
  .sk-hero{grid-template-columns:1fr;gap:20px}
  .sk-hero-art{order:-1}
  .sk-can,.sk-pairs{grid-template-columns:1fr}
  .sk-steps li{grid-template-columns:34px 1fr;gap:4px 10px}
  .sk-steps li span{grid-column:2}
  .sk-example{grid-template-columns:1fr}
  .sk-cta{padding:28px 20px}
}
/* 最上位スキル(自律的なPDCA・PMF検証)の札 */
.sk-rank{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
.sk-ab .mv-abcards{margin-top:0}
.sk-ab .mv-abcards__head h2{font-size:clamp(22px,2.6vw,28px);margin:0}
/* 日本語は文節で折る(phrase.js が keep-all の要素に <wbr> を入れる)。最後の行が1〜2字だけにならないように */
.sk h1,.sk h2,.sk p,.sk li,.sk strong,.sk span,.sk small,.sk b{word-break:keep-all;overflow-wrap:anywhere}
.sk p,.sk li,.sk span{text-wrap:pretty}

.sk-hero h1{font-size:clamp(32px,4.4vw,52px)}
.sk-hero h1 .sk-title-part{display:inline-block;max-width:100%;word-break:normal;overflow-wrap:anywhere}