/* ==========================================================
   spinWorks v3(2026-10-18 山田さん:コンセプト=「優秀で、なんでも頼める事務員を雇いませんか？」)
   最新情報のキャッチアップ→データ整理→請求書などの電子化→社内システムの開発・実装を一続きで
   ========================================================== */
.wk2-mv { display: grid; gap: 0; padding: 0 var(--svc-pad, 20px); }
.wk2-mv-photo { margin: 0 calc(var(--svc-pad, 20px) * -1); aspect-ratio: 16 / 10; overflow: hidden; }
.wk2-mv-photo img { width: 100%; height: 100%; object-fit: cover; }
.wk2-mv-copy { padding: 32px 0 8px; }
.wk2-mv-h { margin: 24px 0 0; font-size: clamp(26px, 3.4vw, 44px); font-weight: 700; line-height: 1.5; letter-spacing: .02em; }
.wk2-mv-h span { display: block; }
.wk2-mv-p { margin: 18px 0 28px; max-width: 34em; font-size: 15px; line-height: 2; color: #444; }
@media (min-width: 1024px) {
  .wk2-mv { grid-template-columns: 1fr 1fr; align-items: center; column-gap: 56px; padding-top: 40px; }
  .wk2-mv-photo { margin: 0; aspect-ratio: 4 / 3.4; order: 2; }
  .wk2-mv-copy { padding: 0; }
}

/* なぜ今 */
.wk2-now-grid { display: grid; gap: 32px; margin-top: 40px; align-items: center; }
@media (min-width: 900px) { .wk2-now-grid { grid-template-columns: 1.1fr 1fr; } }
.wk2-gap { margin: 0; }
.wk2-gap svg { width: 100%; display: block; }
.wk2-gap figcaption { font-size: 12px; color: #666; }
.wk2-now-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.wk2-now-list li { padding: 18px 20px; border-left: 3px solid #111; background: #f6f6f6; font-size: 14px; line-height: 1.8; color: #444; }
.wk2-now-list b { display: block; margin-bottom: 4px; font-size: 16px; color: #111; }

/* 考え方:2人の事務員 */
.wk2-compare { display: grid; gap: 20px; margin-top: 40px; }
@media (min-width: 900px) { .wk2-compare { grid-template-columns: 1fr 1fr; } }
.wk2-person { padding: 28px; border-radius: 12px; background: #fff; border: 1px solid #ccc; }
.wk2-person.is-us { background: #111; color: #fff; border-color: #111; }
.wk2-tag { margin: 0; display: inline-block; padding: 4px 14px; border-radius: 999px; background: #e9e9e9; font-size: 13px; font-weight: 700; }
.is-us .wk2-tag { background: #FE8E15; color: #222; }
.wk2-person ul { margin: 18px 0 0; padding-left: 1.1em; font-size: 15px; line-height: 2; }
.wk2-person-end { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #ddd; font-size: 15px; font-weight: 700; }
.is-us .wk2-person-end { border-top-color: rgba(255,255,255,.25); }

/* 一気通貫:4つの段(矢印でつなぐ) */
.wk2-steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: s; }
@media (min-width: 1024px) { .wk2-steps { grid-template-columns: repeat(4, 1fr); gap: 28px; } }
.wk2-steps > li { position: relative; padding: 24px; border: 1px solid #ccc; border-radius: 12px; background: #fff; }
.wk2-steps > li.is-key { border: 2px solid #111; }
@media (min-width: 1024px) { .wk2-steps > li:not(:last-child)::after { content: "→"; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); font-family: "Jost", sans-serif; font-size: 18px; } }
@media (max-width: 1023px) { .wk2-steps > li:not(:last-child)::after { content: "↓"; position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); font-size: 16px; } }
.wk2-step-no { font-family: "Jost", sans-serif; font-size: 26px; }
.wk2-steps h3 { margin: 8px 0 0; font-size: 17px; font-weight: 700; line-height: 1.5; }
.wk2-steps p { margin: 8px 0 0; font-size: 14px; line-height: 1.8; color: #444; }
.wk2-steps ul { margin: 12px 0 0; padding: 12px 0 0 1.1em; border-top: 1px solid #eee; font-size: 13px; line-height: 1.8; color: #555; }
.wk2-flow-note { margin: 20px 0 0; font-size: 14px; color: #444; }

/* 比較表 */
.wk2-table-wrap { margin-top: 40px; overflow-x: auto; }
.wk2-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; text-align: center; }
.wk2-table th, .wk2-table td { padding: 16px 10px; border-bottom: 1px solid rgba(255,255,255,.18); }
.wk2-table thead th { font-weight: 500; color: rgba(255,255,255,.75); }
.wk2-table tbody th { text-align: left; font-weight: 500; }
.wk2-table .is-us { background: #fff; color: #111; font-weight: 700; }
.wk2-table thead .is-us { font-family: "Jost", sans-serif; font-size: 16px; color: #111; }
.wk2-table-note { margin: 12px 0 0; font-size: 12px; color: #ccc; }

/* たとえば1日 */
.wk2-days { list-style: none; margin: 40px 0 0; padding: 0 0 12px; display: grid; grid-auto-flow: column; grid-auto-columns: min(76vw, 280px); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; }
@media (min-width: 1024px) { .wk2-days { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; } }
.wk2-days li { scroll-snap-align: start; }
.wk2-days figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.wk2-days img { width: 100%; height: 100%; object-fit: cover; }
.wk2-days time { display: block; margin-top: 14px; font-family: "Jost", sans-serif; font-size: 26px; line-height: 1; }
.wk2-days h3 { margin: 6px 0 0; font-size: 15px; }
.wk2-day-now { margin: 6px 0 0; font-size: 13px; color: #555; }
.wk2-day-do { margin: 10px 0 0; padding: 12px; background: #111; color: #fff; font-size: 13px; line-height: 1.7; }
.wk2-day-do small { display: block; font-size: 11px; color: #FE8E15; }

/* デモ・進め方 */
.wk2-demo video { width: 100%; margin-top: 32px; display: block; background: #000; }
.wk2-demo-note { margin: 10px 0 0; font-size: 12px; color: #555; }
.wk2-demo-note a { color: inherit; }
.wk2-start-list { list-style: none; margin: 40px 0 0; padding: 0; max-width: 820px; }
.wk2-start-list li { position: relative; padding: 0 0 32px 36px; margin-left: 8px; border-left: 1px solid #111; }
.wk2-start-list li:last-child { border-left-color: transparent; padding-bottom: 0; }
.wk2-start-list li::before { content: ""; position: absolute; left: -8px; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: #111; }
.wk2-start-list time { font-size: 12px; color: #555; letter-spacing: .08em; }
.wk2-start-list h3 { margin: 4px 0 0; font-size: 18px; font-weight: 700; }
.wk2-start-list p { margin: 6px 0 0; font-size: 14px; line-height: 1.9; color: #444; }

.wk2-steps ul li { padding: 0; border: 0; background: none; }
.wk2-steps ul li::after { content: none !important; }

/* PAIN:社長の胸の内(4つ)+「知る→当てはめる→回す」の階段 */
.wk2-pain-list { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 900px) { .wk2-pain-list { grid-template-columns: 1fr 1fr; } }
.wk2-pain-list li { display: flex; gap: 16px; padding: 24px; border-radius: 12px; background: #f4f4f4; }
.wk2-pain-list span { font-family: "Jost", sans-serif; font-size: 20px; color: #888; }
.wk2-pain-list p { margin: 0; font-size: clamp(16px, 1.6vw, 19px); font-weight: 700; line-height: 1.7; }
.wk2-stairs { position: relative; margin: 56px 0 0; }
.wk2-stairs ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 8px; }
.wk2-stairs li { display: grid; gap: 6px; align-content: start; padding: 18px 16px; border-radius: 10px 10px 0 0; background: #e6e6e6; }
.wk2-stairs li:nth-child(1) { min-height: 110px; }
.wk2-stairs li:nth-child(2) { min-height: 160px; background: #111; color: #fff; }
.wk2-stairs li:nth-child(3) { min-height: 210px; background: #111; color: #fff; }
.wk2-stairs b { font-size: 18px; }
.wk2-stairs span { font-size: 13px; line-height: 1.7; opacity: .85; }
.wk2-stairs-stop { position: absolute; left: 33.3%; top: -6px; transform: translateX(-50%); margin: 0; padding: 6px 12px; border-radius: 999px; background: #FE8E15; color: #222; font-size: 12px; font-weight: 700; white-space: nowrap; }
.wk2-stairs-stop::after { content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #FE8E15; border-bottom: 0; }
.wk2-stairs figcaption { margin-top: 16px; font-size: 14px; line-height: 1.8; color: #333; font-weight: 500; }
@media (max-width: 760px) { .wk2-stairs b { font-size: 15px; } .wk2-stairs span { font-size: 12px; } .wk2-stairs li { padding: 14px 10px; } .wk2-stairs-stop { top: -30px; } }

/* BOTTLENECK:仕事の流れの詰まり */
.wk2-pipe { margin: 48px 0 0; }
.wk2-pipe-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: p; }
@media (min-width: 1024px) { .wk2-pipe-flow { grid-template-columns: repeat(5, 1fr); gap: 0; } }
.wk2-pipe-flow li { position: relative; display: grid; gap: 10px; padding: 18px 16px; background: #fff; border: 1px solid #111; }
@media (min-width: 1024px) {
  .wk2-pipe-flow li { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); padding: 18px 22px 18px 28px; border: 0; background: #111; color: #fff; }
  .wk2-pipe-flow li:first-child { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
}
.wk2-pipe-flow b { font-size: 15px; }
.wk2-pipe-flow em { font-style: normal; display: inline-block; padding: 6px 10px; border-radius: 6px; background: #FFF1E3; color: #8a4100; font-size: 12px; line-height: 1.6; }
.wk2-pipe figcaption { margin-top: 12px; font-size: 12px; color: #555; }
.wk2-neck-out { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 900px) { .wk2-neck-out { grid-template-columns: 1fr 1fr; } }
.wk2-neck-out > div { padding: 24px; border-radius: 12px; background: #fff; border-top: 3px solid #111; }
.wk2-neck-out h3 { margin: 0; font-size: 17px; font-weight: 700; }
.wk2-neck-out p { margin: 8px 0 0; font-size: 14px; line-height: 1.9; color: #444; }

/* 2026-10-19 必須6:スマホの文字切れ・語中改行(階段図の吹き出し・箱・見出し)と、比較表の spinWorks 列が隠れる問題 */
.wk2-who h2 .ph { display: inline-block; }
@media (max-width:760px) {
  .wk2-stairs { display: flex; flex-direction: column; }
  .wk2-stairs-stop { order: -1; position: static; transform: none; align-self: flex-start; max-width: 100%; white-space: normal; line-height: 1.6; border-radius: 14px; margin: 0 0 14px; padding: 8px 14px; }
  .wk2-stairs-stop::after { left: 28px; transform: none; }
  .wk2-stairs ol { grid-template-columns: 1fr; gap: 6px; align-items: stretch; }
  .wk2-stairs ol > li:nth-child(n) { min-height: 0; grid-template-columns: 7.5em 1fr; align-items: baseline; column-gap: 12px; row-gap: 0; border-radius: 10px; padding: 14px 16px; }
  .wk2-table { min-width: 0; display: block; text-align: left; }
  .wk2-table thead { display: none; }
  .wk2-table tbody, .wk2-table tr, .wk2-table th, .wk2-table td { display: block; }
  .wk2-table tr { padding: 16px 0 10px; border-bottom: 1px solid rgba(255,255,255,.18); }
  .wk2-table tbody th { padding: 0 0 10px; font-size: 15px; font-weight: 700; border: 0; }
  .wk2-table td { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; padding: 5px 0; border: 0; font-size: 13px; text-align: left; }
  .wk2-table td::before { content: attr(data-col); color: rgba(255,255,255,.6); font-weight: 400; }
  .wk2-table td.is-us { background: transparent; color: #fff; font-weight: 700; }
  .wk2-table td.is-us::before { color: #FE8E15; font-weight: 700; }
}