@charset "UTF-8";
/* =========================================================
   WHY KSL / キャリア採用LP（7HP WHY KSL.pdf）
   各 top 値は「PDF上のY座標 − セクション開始Y」
   ========================================================= */

.hang { margin-left: -.5em; }
.page-why .ttl__en::before { background: #5dc8f5; }
.page-why .ttl__en { color: var(--c-text2); }
.page-why .ttl__ja { color: var(--c-text2); line-height: 45px; }
.page-why .ttl__bg { font-size: 110px; }
.page-why .arrow--w { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23fff'/%3E%3Cpath d='M6 12h11.2' stroke='%23393939' stroke-width='.8'/%3E%3Cpath d='M14.4 9.3 18 12l-3.6 2.7' fill='none' stroke='%23393939' stroke-width='.8'/%3E%3C/svg%3E"); }

/* 見出し下のハイライト（シアンの帯） */
.wk-mark { position: relative; z-index: 0; }
.wk-mark::after { content: ""; position: absolute; left: -3px; width: 71px; bottom: 15px; height: 18px; background: #08caf8; z-index: -1; }
.wk-mark--2::after { left: 0; width: 138px; bottom: -2px; }

/* 共通ボタン */
.wk-btn { display: block; height: 61px; transition: opacity .2s; --cx: 12px; --cy: 18px; }
.wk-btn:hover { opacity: .85; }
.wk-btn > * { position: absolute; }
.wk-btn span { top: 18px; font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: .04em; white-space: nowrap; color: var(--c-text2); }
.wk-btn .arrow { top: 18px; }
.wk-btn--red { background: #eb6d60; }
.wk-btn--red span { left: 29px; }
.wk-btn--gray { background: #d1d1d1; }
.wk-btn--gray span { left: 23px; }
.wk-btn--light { background: #f1f1f1; }
.wk-btn--cta span { letter-spacing: .02em; }
/* 各ボタンの位置（ヒーロー：募集職種／働く人、CTA：問い合わせ／KSL について） */
.wk-btn--jobs { left: 75px; top: 418px; width: 219px; }
.wk-btn--jobs .arrow { left: 175px; }
.wk-btn--people { left: 316px; top: 418px; width: 190px; }
.wk-btn--people .arrow { left: 146px; }
.wk-btn--cta { left: 298px; top: 355px; width: 271px; --cx: 15px; --cy: 18px; }
.wk-btn--cta span { left: 18px; }
.wk-btn--cta .arrow { left: 227px; }
.wk-btn--about { left: 589px; top: 355px; width: 218px; --cx: 12px; --cy: 16px; }
.wk-btn--about span { left: 22px; }
.wk-btn--about .arrow { left: 175px; }

/* ---------- HERO + WHY (y82–1378) ---------- */
.wk-hero { height: 1260px; }
.wk-hero__bleed { position: absolute; left: 0; top: 30px; width: calc(50% - 560px); height: 550px; background: #fff; }
.wk-hero__shadow { left: 441px; top: -26px; width: 710px; height: 711px; opacity: .21; }
.wk-hero__photo { left: 500px; top: 0; width: 620px; height: 608px; overflow: hidden; clip-path: path('M178 0C80 0 0 80 0 178V443C0 517 46 581 112 608H620V0Z'); }
.wk-hero__photo img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 35%; }
.wk-hero__card { left: 0; top: 30px; width: 696px; height: 550px; background: #fff; --cx: 58px; --cy: 95px; }
.wk-hero__label {
  left: 76px; top: 46px; display: flex; align-items: center;
  font-size: 16px; font-weight: 500; line-height: 20px; letter-spacing: .12em; white-space: nowrap; color: var(--c-text2);
}
.wk-hero__label::before { content: ""; width: 21px; height: 2px; margin-right: 8px; background: #eb6d60; }
.wk-hero__title { left: 72px; top: 103px; font-size: 60px; font-weight: 700; line-height: 1.6; letter-spacing: 0; white-space: nowrap; color: var(--c-text2); }
.wk-hero__lead { left: 75px; top: 328px; font-size: 16px; line-height: 1.8; white-space: nowrap; color: var(--c-text2); }
.wk-stat { top: 502px; height: 28px; font-size: 12px; font-weight: 500; line-height: 28px; letter-spacing: .08em; color: var(--c-sub); white-space: nowrap; }
.wk-stat--b { background: #333; color: #fff; text-align: center; letter-spacing: .04em; }
.wk-stat--1 { left: 77px; }
.wk-stat--2 { left: 109px; width: 49px; }
.wk-stat--3 { left: 164px; }
.wk-stat--4 { left: 235px; width: 94px; }
.wk-stat--5 { left: 337px; }
.wk-hero__wm {
  left: -4px; top: 596px; font-size: 96px; font-weight: 900; line-height: 96px; letter-spacing: 0;
  color: #e8e8e8; white-space: nowrap; pointer-events: none;
}
.wk-why__wm { left: -7px; top: 737px; line-height: 110px; writing-mode: vertical-rl; letter-spacing: .01em; }
.wk-why__en { left: 78px; top: 789px; }
.wk-why__ja { left: 74px; top: 831px; }
.wk-why__lead { left: 74px; top: 901px; line-height: 1.8; color: var(--c-sub2); white-space: nowrap; }
.wk-reason { position: absolute; top: 0; }
.wk-reason > * { position: absolute; left: 0; white-space: nowrap; }
.wk-reason h3 { font-size: 16px; font-weight: 700; line-height: 1.6; letter-spacing: .06em; color: var(--c-text2); }
.wk-reason p { font-size: 10px; line-height: 1.8; color: var(--c-sub2); }
.wk-reason__no { top: 1007px; font-family: var(--font-num); font-size: 74px; font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.wk-reason--1 { left: 88px; }
.wk-reason--1 h3 { top: 1044px; }
.wk-reason--1 p { top: 1089px; }
.wk-reason--1 .wk-reason__no { left: 174px; color: #5dc9f5; }
.wk-reason--2 { left: 390px; }
.wk-reason--2 h3 { top: 1018px; }
.wk-reason--2 p { top: 1089px; }
.wk-reason--2 .wk-reason__no { left: 173px; color: #59c185; }
.wk-reason--3 { left: 692px; }
.wk-reason--3 h3 { top: 1044px; }
.wk-reason--3 p { top: 1090px; }
.wk-reason--3 .wk-reason__no { left: 173px; top: 1008px; color: #b3c1fa; }

/* ---------- NUMBERS (y1378–2283) ---------- */
.wk-num { height: 905px; background: var(--c-gray); }
.wk-num__wm { left: 181px; top: -24px; color: #fff; }
.wk-num__en { left: 104px; top: 68px; }
.wk-num__ja { left: 107px; top: 110px; }
.wk-num__note { font-size: 9px; line-height: 20px; color: #bababa; white-space: nowrap; }
.nc { width: 212px; height: 162px; background: #fff; border-top: 2px solid var(--bar); --cx: 13px; --cy: 18px; }
.nc__val { position: absolute; display: flex; align-items: baseline; white-space: nowrap; color: var(--c-text2); }
.nc__val b { font-family: var(--font-num); font-size: 57px; font-weight: 800; line-height: 1; letter-spacing: -.01em; }
.nc__val small { position: relative; top: -3px; margin-left: 6px; font-size: 17px; font-weight: 700; line-height: 1; }
.nc__val small.pct { font-weight: 900; font-size: 18px; margin-left: 6px; }
.nc__val small.kyo { font-size: 16px; }
.nc__cap { position: absolute; font-size: 10px; line-height: 1.8; letter-spacing: .06em; color: var(--c-sub2); white-space: nowrap; }
.nc__cap .paren { margin-left: -5px; letter-spacing: 0; }
.nc--delivery { left: 106px; top: 208px; --bar: #5dc8f5; }
.nc--delivery .nc__val { left: 23px; top: 39px; }
.nc--delivery .nc__cap { left: 33px; top: 104px; }
.nc--leave { left: 336px; top: 209px; --bar: #eb6d60; }
.nc--leave .nc__val { left: 23px; top: 41px; }
.nc--leave .nc__cap { left: 24px; top: 103px; }
.nc--staff { left: 564px; top: 208px; --bar: #58c185; }
.nc--staff .nc__val { left: 29px; top: 40px; }
.nc--staff .nc__cap { left: 32px; top: 104px; }
.nc--base { left: 794px; top: 209px; --bar: #b3c1f9; }
.nc--base .nc__val { left: 23px; top: 38px; }
.nc--base .nc__cap { left: 21px; top: 103px; }
.st { position: absolute; width: 212px; height: 142px; background: #fff; }
.st > * { position: absolute; }
.st__tag {
  left: 14px; top: 14px; height: 23px; padding-left: 6px; background: #333; color: #fff;
  font-size: 10px; font-weight: 500; line-height: 23px; letter-spacing: .03em; white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 5px) 100%, 0 100%);
}
.st__val { left: 19px; top: 50px; display: flex; align-items: baseline; white-space: nowrap; color: var(--c-text2); }
.st__val b { font-family: var(--font-num); font-size: 30px; font-weight: 700; line-height: 30px; letter-spacing: -.01em; }
.st__val b.colon { margin: 0 9px 0 8px; }
.st__val small { margin-left: 6px; font-size: 9px; line-height: 1; color: var(--c-sub); }
.st__sub { left: 20px; top: 94px; font-size: 9px; line-height: 1.8; letter-spacing: .06em; color: var(--c-sub); white-space: nowrap; }
.st__sub--2 { top: 85px; }
.st__sub .paren { margin-left: -4px; }
.st--gender { left: 106px; top: 470px; }
.st--gender .st__tag { width: 43px; }
.st--age { left: 335px; top: 470px; width: 211px; }
.st--age .st__tag { width: 55px; }
.st--tenure { left: 563px; top: 470px; }
.st--tenure .st__tag { width: 81px; }
.st--leave { left: 792px; top: 470px; }
.st--leave .st__tag { width: 71px; }
.st--overtime { left: 106px; top: 636px; }
.st--overtime .st__tag { width: 77px; }
.st--flex { left: 334px; top: 636px; }
.st--flex .st__tag { width: 122px; }
.st--turnover { left: 563px; top: 636px; }
.st--turnover .st__tag { width: 50px; }
.st--childcare { left: 792px; top: 636px; width: 211px; }
.st--childcare .st__tag { width: 100px; }

/* ---------- JOBS (y2283–3461) ---------- */
.wk-jobs { height: 1173px; }
.wk-jobs__wm { left: 832px; top: -19px; }
.wk-jobs__en { left: 116px; top: 102px; }
.wk-jobs__ja { left: 112px; top: 143px; }
.wk-jobs__lead { left: 117px; top: 215px; line-height: 24px; color: var(--c-sub2); white-space: nowrap; }
.job__photo { height: 354px; overflow: hidden; --cx: 11px; --cy: 39px; }
.job__photo img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.job__tag { font-size: 12px; font-weight: 700; line-height: 35px; letter-spacing: .15em; color: var(--c-text2); white-space: nowrap; --cx: 11px; --cy: 13px; }
.job__ttl { font-size: 16px; font-weight: 700; line-height: 24px; letter-spacing: .04em; color: var(--c-text2); white-space: nowrap; }
.job__txt { font-size: 12px; line-height: 1.8; color: var(--c-sub2); white-space: nowrap; }
.job__list { width: 287px; border-top: 1px solid #e4e4e4; }
.job__list li {
  position: relative; display: flex; align-items: center; padding-left: 20px;
  border-bottom: 1px solid #e4e4e4; font-size: 12px; line-height: 24px; letter-spacing: .02em; white-space: nowrap; color: var(--c-text);
}
.job__list li::before { content: ""; position: absolute; left: 3px; top: calc(50% - 3px); width: 6px; height: 6px; background: #eb6d60; }
.job__list li { height: 52px; }
.job__list li:first-child { height: 50px; }
.job__list--operation li:nth-child(2), .job__list--planning li:nth-child(2), .job__list--dx li:nth-child(3), .job__list--corporate li:nth-child(4) { height: 53px; }
/* 各職種（OPERATION／PLANNING／DX・SYSTEM／CORPORATE）の位置 */
.job__photo--operation { left: 109px; top: 346px; width: 132px; }
.job__photo--operation img { object-position: 43% 50%; }
.job__tag--operation { left: 255px; top: 346px; width: 107px; height: 35px; padding-left: 9px; background: #5dc8f5; }
.job__ttl--operation { left: 252px; top: 392px; }
.job__txt--operation { left: 254px; top: 435px; }
.job__list--operation { left: 255px; top: 497px; }
.job__photo--planning { left: 574px; top: 346px; width: 131px; }
.job__photo--planning img { object-position: 52.6% 50%; }
.job__tag--planning { left: 722px; top: 346px; width: 106px; height: 36px; padding-left: 13px; background: #58c185; }
.job__ttl--planning { left: 719px; top: 393px; }
.job__txt--planning { left: 721px; top: 436px; }
.job__list--planning { left: 721px; top: 498px; }
.job__photo--dx { left: 109px; top: 743px; width: 132px; height: 353px; }
.job__photo--dx img { object-position: 47.3% 50%; }
.job__tag--dx { left: 257px; top: 743px; width: 107px; height: 36px; padding-left: 6px; background: #b3c1f9; }
.job__ttl--dx { left: 254px; top: 790px; }
.job__txt--dx { left: 256px; top: 832px; }
.job__list--dx { left: 256px; top: 917px; }
.job__photo--corporate { left: 576px; top: 744px; width: 131px; height: 353px; }
.job__photo--corporate img { object-position: 44% 62%; }
.job__tag--corporate { left: 723px; top: 744px; width: 107px; height: 35px; padding-left: 8px; background: #f1acaa; }
.job__ttl--corporate { left: 720px; top: 791px; }
.job__txt--corporate { left: 722px; top: 833px; }
.job__list--corporate { left: 723px; top: 896px; }

/* ---------- PEOPLE (y3461–4503) ---------- */
.wk-people { height: 1042px; background: #e6f6f9; }
.wk-people__wm { left: 686px; top: -26px; color: #fff; }
.wk-people__en { left: 102px; top: 58px; }
.wk-people__ja { left: 98px; top: 100px; }
.wk-people__lead { left: 103px; top: 172px; line-height: 24px; color: var(--c-sub2); white-space: nowrap; }
.wk-people__more { left: 893px; top: 168px; gap: 19px; font-size: 10px; letter-spacing: 0; color: var(--c-text2); }
/* 人物カード：採用ページ（recruit.css）と同一 */
.pc { display: block; width: 285px; height: 264px; }
.pc > * { position: absolute; }
.pc__pic { left: 0; top: -90px; width: 285px; height: 268px; } /* 下端＝旧写真エリア下端（178px） */
.pc__shadow { opacity: .28; filter: blur(8px); }
.pc__photo { transition: transform .3s; }
.pc:hover .pc__photo { transform: translateY(-4px); }
.pc__tag {
  left: 0; top: 106px; width: 58px; height: 36px; padding-left: 16px; z-index: 2;
  background: #5dc8f5; color: #fff; font-size: 12px; font-weight: 500; line-height: 36px; letter-spacing: .06em;
  --cx: 6px; --cy: 10px;
}
.pc__box { left: 0; top: 127px; width: 270px; height: 136px; background: #fff; z-index: 1; --cx: 17px; --cy: 25px; }
.pc__quote { z-index: 2; font-size: 18px; font-weight: 700; line-height: 28px; letter-spacing: .12em; color: var(--c-text2); white-space: nowrap; } /* 氏名 */
.pc__quote .i { margin-left: 6px; }
.pc__meta {
  z-index: 2; top: 201px; right: 30px; display: flex; align-items: center; white-space: nowrap; text-align: right;
  font-size: 11px; line-height: 1.8; letter-spacing: .06em; color: var(--c-sub2);
}
.pc__meta::before { content: ""; width: 15px; height: 1px; margin-right: 8px; background: #d9534f; }
/* 各カードの位置と微調整（1〜3：上段／4・5：下段） */
.pc--1 { left: 102px; top: 323px; }
.pc--2 { left: 413px; top: 323px; }
.pc--3 { left: 729px; top: 323px; }
.pc--4 { left: 104px; top: 696px; }
.pc--5 { left: 415px; top: 696px; }
.pc--2 .pc__tag, .pc--5 .pc__tag { left: -1px; }
.pc--3 .pc__tag { left: -2px; }
.pc--1 .pc__box, .pc--4 .pc__box { top: 128px; }
.pc--2 .pc__box, .pc--5 .pc__box { left: -1px; width: 271px; }
.pc--3 .pc__box { left: -2px; width: 271px; }
.pc--1 .pc__quote, .pc--4 .pc__quote { left: 13px; top: 147px; }
.pc--2 .pc__quote { left: 9px; top: 148px; }
.pc--3 .pc__quote { left: 11px; top: 145px; }
.pc--5 .pc__quote { left: 9px; top: 147px; }

/* ---------- ENVIRONMENT (y5105–5925) ※2026-09 リード削除で 40px 繰り上げ／休暇制度・職場の雰囲気を追加して 3 段に ---------- */
.wk-env { height: 998px; background: var(--c-gray); }
.page-why .wk-env__wm { left: auto; right: -4px; top: -17px; font-size: 94px; color: #fff; } /* 2026-10 「WORK ENVIRONMENT」に変更：全文が入るよう縮小・右寄せ */
.wk-env__en { left: 105px; top: 68px; }
.wk-env__ja { left: 108px; top: 110px; }
.ec { width: 297px; height: 188px; background: #fff; border-top: 3px solid var(--bar); --cx: 16px; --cy: 21px; }
.ec > * { position: absolute; }
.ec h3 { left: 28px; top: 44px; font-size: 16px; font-weight: 700; line-height: 24px; letter-spacing: .06em; color: var(--c-text2); white-space: nowrap; }
.ec p { left: 28px; top: 86px; font-size: 10px; line-height: 1.8; letter-spacing: .02em; color: var(--c-sub2); white-space: nowrap; }
.ec--2 h3 { top: 45px; }
.ec--2 p { top: 87px; }
.ec img { margin-top: -3px; }
.ec--workstyle { left: 104px; top: 210px; --bar: #5dc8f5; }
.ec--workstyle img { left: 209px; top: 28px; width: 45px; }
.ec--training { left: 417px; top: 210px; --bar: #58c185; }
.ec--training img { left: 222px; top: 33px; width: 45px; }
.ec--award { left: 728px; top: 210px; --bar: #b3c1f9; }
.ec--award img { left: 229px; top: 24px; width: 36px; }
.ec--health { left: 105px; top: 428px; --bar: #f1acaa; }
.ec--health img { left: 206px; top: 32px; width: 49px; }
.ec--family { left: 417px; top: 428px; --bar: #eb6d60; }
.ec--family img { left: 222px; top: 30px; width: 43px; }
.ec--welfare { left: 729px; top: 428px; --bar: #d1ed95; }
.ec--welfare img { left: 221px; top: 36px; width: 43px; }
.ec--leave { left: 105px; top: 646px; --bar: #5dc8f5; }
.ec--leave img { left: 214px; top: 30px; width: 40px; }
.ec--culture { left: 417px; top: 646px; --bar: #58c185; }
.ec--culture img { left: 222px; top: 30px; width: 42px; }
.wk-env__more { left: 105px; top: 892px; gap: 23px; font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--c-text2); }

/* ---------- FLOW (y5925–6493) ---------- */
.wk-flow { height: 568px; }
.wk-flow__wm { left: 807px; top: -19px; }
.wk-flow__en { left: 107px; top: 69px; }
.wk-flow__ja { left: 110px; top: 110px; }
.fl { width: 218px; height: 290px; background: var(--c-gray); }
.fl__no {
  width: 58px; height: 35px; padding-left: 14px; z-index: 2;
  font-family: var(--font-num); font-size: 21px; font-weight: 800; line-height: 37px; letter-spacing: .04em; color: #fff;
  --cx: 6px; --cy: 9px;
}
.fl__arw { top: 346px; width: 8px; height: 18px; background: #5dc8f5; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.fl__ttl { font-size: 16px; font-weight: 700; line-height: 24px; letter-spacing: .06em; color: var(--c-text2); white-space: nowrap; }
.fl__p { font-size: 10px; line-height: 1.8; color: var(--c-sub2); white-space: nowrap; }
/* 各ステップ（01〜04）の位置 */
.fl--1 { left: 113px; top: 226px; }
.fl--2 { left: 348px; top: 226px; }
.fl--3 { left: 583px; top: 227px; }
.fl--4 { left: 818px; top: 223px; width: 219px; }
.fl__no--1 { left: 113px; top: 215px; background: #5dc8f5; }
.fl__no--2 { left: 348px; top: 215px; background: #58c185; }
.fl__no--3 { left: 583px; top: 215px; height: 36px; background: #b3c1f9; }
.fl__no--4 { left: 818px; top: 212px; background: #eb6d60; }
.fl__img--1 { left: 170px; top: 241px; width: 134px; }
.fl__img--2 { left: 362px; top: 245px; width: 180px; }
.fl__img--3 { left: 651px; top: 250px; width: 97px; }
.fl__img--4 { left: 922px; top: 251px; width: 61px; }
.fl__arw--1 { left: 336px; }
.fl__arw--2 { left: 572px; }
.fl__arw--3 { left: 808px; }
.fl__ttl--1 { left: 137px; top: 389px; }
.fl__p--1 { left: 137px; top: 433px; }
.fl__ttl--2 { left: 372px; top: 389px; }
.fl__p--2 { left: 372px; top: 433px; }
.fl__ttl--3 { left: 607px; top: 389px; }
.fl__p--3 { left: 607px; top: 433px; }
.fl__ttl--4 { left: 842px; top: 385px; }
.fl__p--4 { left: 842px; top: 429px; }

/* ---------- FAQ (y6493–7578) ---------- */
.wk-faq { height: auto; background: var(--c-gray); }
.wk-faq .faq-list { margin-left: 112px; padding: 207px 0 82px; }
.wk-faq .faq__a p { line-height: 1.8; }
.wk-faq__wm { left: 900px; top: -20px; color: #fff; }
.wk-faq__en { left: 104px; top: 68px; }
.wk-faq__ja { left: 108px; top: 110px; }

/* ---------- CTA (y7578–8161) ---------- */
.wk-cta { height: 570px; }
.wk-cta__box { left: 117px; top: 108px; width: 874px; height: 376px; background: #333; --cx: 43px; --cy: 57px; }
.wk-cta__ttl { left: 0; width: 1136px; top: 169px; text-align: center; font-size: 30px; font-weight: 700; line-height: 1.6; letter-spacing: .02em; color: #fff; }
.wk-cta__txt { left: 0; width: 1114px; top: 284px; text-align: center; font-size: 12px; line-height: 1.8; letter-spacing: .02em; color: #fff; }

/* =========================================================
   SP（〜767px）※SPデザインなし：s01 TOP（ヒーロー・PEOPLE・NUMBERS）/ s04 の作法で1カラム化
   ========================================================= */
@media (max-width: 767px) {
  /* 見出し */
  .page-why .ttl__bg { font-size: 60px; left: 30px; top: -25px; }
  .page-why .ttl__en, .page-why .ttl__ja { position: relative; left: auto; top: auto; }
  .page-why .ttl__en { margin-left: 16px; font-size: 14px; }
  .page-why .ttl__ja { margin: 8px 16px 0 14px; line-height: 43px; }
  .wk-why__lead, .wk-jobs__lead, .wk-people__lead {
    position: relative; left: auto; top: auto; margin: 15px 16px 0 18px; font-size: 12px; line-height: 1.8; white-space: normal;
  }
  .wk-why__lead br, .wk-jobs__lead br, .wk-people__lead br, .wk-reason p br, .job__txt br, .fl__p br, .faq__a br { display: none; }
  .page-why main .sec { padding: 60px 0 70px; }

  /* ---------- HERO（s01 TOP のファーストビューに準拠） ---------- */
  .page-why main .wk-hero { padding: 0 0 70px; }
  .wk-hero::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 760px; background: #f3f3f3; }
  .wk-hero__bleed, .wk-hero__shadow { display: none; }
  .wk-hero .inner { padding-top: 932px; }
  .wk-hero__photo { left: 29px; right: calc(-1 * var(--bleed)); top: 0; width: auto; height: 308px; clip-path: none; }
  .wk-hero__photo img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: 64% 30%; }
  .wk-hero__card { left: calc(-1 * var(--bleed)); top: 199px; width: calc(340px + var(--bleed)); height: 523px; --cx: 31px; --cy: 42px; }
  .wk-hero__label { left: 22px; top: 227px; font-size: 14px; letter-spacing: .08em; }
  .wk-hero__title { left: 47px; top: 263px; font-size: 26px; line-height: 1.6; letter-spacing: .02em; }
  .wk-hero__title .wk-mark::after { left: -1px; width: 28px; bottom: 1px; height: 12px; }
  .wk-hero__lead { left: 48px; top: 368px; width: 280px; font-size: 12px; line-height: 1.8; white-space: normal; }
  .wk-hero .wk-btn { left: 47px; width: 201px; height: 56px; --cx: 11px; --cy: 17px; }
  .wk-hero .wk-btn--jobs { top: 482px; }
  .wk-hero .wk-btn--people { top: 555px; }
  .wk-hero .wk-btn span { left: 15px; top: 16px; font-size: 14px; }
  .wk-hero .wk-btn .arrow { left: 162px; top: 16px; }
  .wk-stat { height: 20px; line-height: 20px; }
  .wk-stat--1 { left: 44px; top: 639px; }
  .wk-stat--2 { left: 77px; top: 639px; }
  .wk-stat--3 { left: 44px; top: 664px; }
  .wk-stat--4 { left: 117px; top: 664px; width: 95px; }
  .wk-stat--5 { left: 217px; top: 664px; }
  .wk-hero__wm { left: -2px; top: 716px; width: 390px; font-size: 69px; line-height: 74px; white-space: normal; }
  /* WHY KSL */
  .page-why .wk-env__wm { right: auto; } /* SP は他の透かしと同様に左起点で右へはみ出し */
  .page-why .wk-why__wm { left: 30px; top: 907px; line-height: 60px; writing-mode: horizontal-tb; }
  .wk-mark--2::after { width: 120px; bottom: 0; height: 15px; }
  .wk-reason { position: relative; left: auto; display: flex; flex-direction: column; margin: 44px 20px 0 22px; }
  .wk-why__lead + .wk-reason { margin-top: 36px; }
  .wk-reason > * { position: static; white-space: normal; }
  .wk-reason__no { order: -1; font-size: 56px; }
  .wk-reason h3 { margin-top: 12px; }
  .wk-reason p { margin-top: 8px; font-size: 11px; line-height: 1.8; }

  /* ---------- NUMBERS（s01 NUMBERS：縦並び＋左の色線） ---------- */
  .wk-num .nc {
    position: relative; left: auto; top: auto; width: auto; height: auto; min-height: 117px;
    margin: 25px 20px 0 54px; padding: 8px 0 10px 42px; background: none; border-top: 0; border-left: 1.5px solid var(--bar); clip-path: none;
  }
  .wk-num .nc:first-of-type { margin-top: 40px; }
  .wk-num .nc__val, .wk-num .nc__cap { position: static; }
  .wk-num .nc__val b { line-height: 57px; }
  .wk-num .nc__cap { margin-top: 12px; }
  .wk-num__note { position: static; margin: 28px 24px 0; font-size: 8px; line-height: 16px; white-space: normal; }
  .wk-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 32px 20px 0; }
  .wk-stats .st { position: relative; left: auto; top: auto; width: auto; height: 142px; }
  .wk-stats .st:first-child, .wk-stats .st:last-child { grid-column: 1 / -1; }
  .wk-stats .st__tag { left: 12px; width: auto; padding-right: 11px; } /* 文字幅に合わせる（端末フォント差ではみ出さない） */
  .wk-stats .st__val { left: 14px; }
  .wk-stats .st__sub { left: 14px; letter-spacing: .02em; }

  /* ---------- JOBS（写真→タグ→職種名→本文→業務リスト を縦積み） ---------- */
  .job__photo { position: relative; left: auto; top: auto; width: auto; height: 210px; margin: 50px 19px 0; --cx: 28px; --cy: 38px; }
  .wk-jobs__lead + .job__photo { margin-top: 36px; }
  .job__photo img { position: static; }
  .job__tag { position: relative; display: block; left: auto; top: auto; margin: -17px 0 0 19px; z-index: 6; }
  /* 2026-10 タグ幅を文字に合わせる（DX / SYSTEM のはみ出し対策）。右は斜めカット分の余白を確保 */
  .job__tag { width: fit-content; height: 35px; padding: 0 22px 0 10px; }
  .pc__tag { width: auto; padding-right: 18px; }
  .job__ttl { position: static; margin: 14px 20px 0; }
  .job__txt { position: static; margin: 8px 20px 0; white-space: normal; }
  .job__list { position: static; width: auto; margin: 16px 20px 0; }
  .job__list li { height: auto !important; min-height: 46px; padding-top: 11px; padding-bottom: 11px; line-height: 22px; white-space: normal; }

  /* ---------- PEOPLE（s01 TOP の PEOPLE カードを縦積み、一覧リンクは右寄せで最後に） ---------- */
  .wk-people .inner { display: flex; flex-direction: column; }
  .wk-people .pc { position: relative; left: auto; top: auto; margin: 108px auto 0; }
  .wk-people__more { position: relative; left: auto; top: auto; order: 2; align-self: flex-end; margin: 40px 20px 0 0; }

  /* ---------- ENVIRONMENT ---------- */
  .wk-env .ec { position: relative; left: auto; top: auto; margin: 33px auto 0; }
  .wk-env .ec:first-of-type { margin-top: 40px; }
  .wk-env__more { position: relative; left: auto; top: auto; display: flex; width: fit-content; margin: 36px 20px 0 auto; }

  /* ---------- FLOW（4 ステップ：左に文字・右にイラストのカードを縦積み、間に下向き矢印） ---------- */
  .wk-flow .inner { display: grid; grid-template-columns: 20px 20px 1fr 118px 20px; }
  .wk-flow .inner > * { grid-column: 1 / -1; }
  .wk-flow__ja { margin-bottom: 36px !important; }
  .wk-flow .fl, .wk-flow .fl__no, .wk-flow .inner > img, .wk-flow .fl__arw, .wk-flow .fl__ttl, .wk-flow .fl__p { position: relative; left: auto; top: auto; }
  .wk-flow .fl { grid-column: 2 / 5; width: auto; height: auto; }
  .wk-flow .fl__no { grid-column: 2 / 4; justify-self: start; z-index: 2; }
  .wk-flow .inner > img { grid-column: 4; align-self: center; justify-self: center; width: auto; max-width: 96px; max-height: 96px; margin-right: 12px; }
  .wk-flow .fl__ttl { grid-column: 3 / 4; margin-top: 10px; z-index: 1; }
  .wk-flow .fl__p { grid-column: 3 / 4; margin: 6px 0 22px; white-space: normal; z-index: 1; }
  .wk-flow .fl__arw { grid-column: 2 / 5; justify-self: center; align-self: center; rotate: 90deg; }
  .wk-flow .fl:nth-of-type(1) { grid-row: 3 / 6; } .wk-flow .fl__no:nth-of-type(1) { grid-row: 3; } .wk-flow img:nth-of-type(1) { grid-row: 3 / 6; } .wk-flow h3:nth-of-type(1) { grid-row: 4; } .wk-flow .fl__p:nth-of-type(3) { grid-row: 5; } .wk-flow i:nth-of-type(1) { grid-row: 6; }
  .wk-flow .fl:nth-of-type(2) { grid-row: 7 / 10; } .wk-flow .fl__no:nth-of-type(2) { grid-row: 7; } .wk-flow img:nth-of-type(2) { grid-row: 7 / 10; } .wk-flow h3:nth-of-type(2) { grid-row: 8; } .wk-flow .fl__p:nth-of-type(4) { grid-row: 9; } .wk-flow i:nth-of-type(2) { grid-row: 10; }
  .wk-flow .fl:nth-of-type(3) { grid-row: 11 / 14; } .wk-flow .fl__no:nth-of-type(3) { grid-row: 11; } .wk-flow img:nth-of-type(3) { grid-row: 11 / 14; } .wk-flow h3:nth-of-type(3) { grid-row: 12; } .wk-flow .fl__p:nth-of-type(5) { grid-row: 13; } .wk-flow i:nth-of-type(3) { grid-row: 14; }
  .wk-flow .fl:nth-of-type(4) { grid-row: 15 / 18; } .wk-flow .fl__no:nth-of-type(4) { grid-row: 15; } .wk-flow img:nth-of-type(4) { grid-row: 15 / 18; } .wk-flow h3:nth-of-type(4) { grid-row: 16; } .wk-flow .fl__p:nth-of-type(6) { grid-row: 17; }
  .wk-flow .inner { grid-template-rows: auto auto repeat(3, auto) 36px repeat(3, auto) 36px repeat(3, auto) 36px repeat(3, auto); }

  /* ---------- FAQ ---------- */
  .page-why main .wk-faq { padding-bottom: 0; }
  .wk-faq .faq-list { width: auto; margin: 0 20px; padding: 36px 0 70px; }
  .wk-faq .faq + .faq { margin-top: 26px; }
  .wk-faq .faq__q { padding: 0 40px 18px 0; font-size: 14px; line-height: 1.6; white-space: normal; }
  .wk-faq .faq__ic { left: auto; right: 0; top: -1px; } /* 設問の行間 1.6 に合わせて1行目の中央に */
  .wk-faq .faq__a p { padding-bottom: 24px; line-height: 1.8; white-space: normal; }

  /* ---------- CTA ---------- */
  .page-why main .wk-cta { padding: 60px 20px 80px; }
  .wk-cta__box { left: 0; top: 0; width: 100%; height: 100%; --cx: 30px; --cy: 40px; }
  .wk-cta .inner { padding: 50px 10px 60px; }
  .wk-cta__ttl, .wk-cta__txt { position: relative; left: auto; top: auto; width: auto; }
  .wk-cta__ttl { font-size: 22px; line-height: 1.6; }
  .wk-cta__txt { margin-top: 18px; line-height: 1.8; letter-spacing: 0; }
  .wk-cta .wk-btn { position: relative; left: auto; top: auto; margin: 14px auto 0; }
  .wk-cta .wk-btn--red { margin-top: 30px; }
}