/* =====================================================
   INTERESTING INNOVATION - RECRUIT / WORKSTYLE（私たちの働き方）
   style.css → sub.css の後に読み込む
   基準幅: PC 1920 / TB 768 / SP 393（1rem = 基準幅で 10px）
   Figma: 404:24379（フレーム名は "Company" だが採用の下層）
   数字: DIN 2014 → Barlow（Demi=600 / Regular=400）, Roboto SemiBold → Roboto 600
   ===================================================== */

/* 共通の見出し帯・パンくずは css/sub.css。ヘッダー・フッターはホームと同じ（style.css） */

/* 帯に重なる切り抜き写真（Figma "72 1" 538x491 @850,207） */
.ws-head-img { position: absolute; left: 92rem; top: 18.9rem; width: 52rem; z-index: 2; } /* 職人のイラスト（縦長なので幅を詰めて、下端は元の位置に合わせる） */
.ws-head-img.reveal { transform: translateY(3rem); }
.ws-head-img.reveal.is-visible { transform: none; }

/* ---------- ページ内リンク（Frame 721: 帯の下・右寄せ） ---------- */
.ws-anchors { display: flex; justify-content: flex-end; gap: 4.8rem; margin: 33.1rem 20rem 0 0; }
.ws-anchors a { display: block; padding-bottom: .1rem; border-bottom: 1px solid var(--black); font-size: 1.8rem; font-weight: 500; line-height: 1.5; transition: color .3s, border-color .3s; }
.ws-anchors a:hover { color: var(--orange); border-color: var(--orange); }

/* ---------- セクション見出し（日本語 48 + 英字オレンジ 20） ---------- */
.ws-sec-head { display: flex; align-items: center; gap: 1.6rem; margin-left: 20rem; }
.ws-sec-head__ja { font-size: 4.8rem; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.ws-sec-head__en { font-size: 2rem; font-weight: 700; line-height: 1.2; color: var(--orange); white-space: nowrap; }

/* ---------- 仕事紹介 ---------- */
.ws-role { margin-top: 15.6rem; }
.ws-role__top { display: flex; align-items: flex-start; }
.ws-role__top .ws-sec-head { width: 52.3rem; flex: none; padding-top: .3rem; }
.ws-role__lead { width: 100.5rem; font-size: 2.4rem; font-weight: 500; line-height: 1.8; }
.ws-roles { display: grid; grid-template-columns: repeat(3, 47.5rem); gap: 4.8rem; width: 152rem; margin: 8.8rem 0 0 20rem; padding: 0; list-style: none; }
/* カード群はまとめて発火し --d でずらす（以下 .ws-skills__grid / .ws-story__steps も同じ） */
.ws-roles.reveal, .ws-skills__grid.reveal, .ws-story__steps.reveal { opacity: 1; transform: none; filter: none; }
.ws-roles.reveal > li, .ws-skills__grid.reveal > li, .ws-story__steps.reveal > li { opacity: 0; transform: translateY(4rem); filter: blur(.4rem); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1), filter .8s ease; transition-delay: var(--d, 0s); }
.ws-roles.reveal.is-visible > li, .ws-skills__grid.reveal.is-visible > li, .ws-story__steps.reveal.is-visible > li { opacity: 1; transform: none; filter: none; }
.ws-rcard__head { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; height: 3.2rem; }
.ws-rcard__ttl { font-family: 'Roboto', var(--font-ja); font-size: 3.2rem; font-weight: 600; line-height: 1; white-space: nowrap; }
.ws-rcard__en { font-size: 1.2rem; font-weight: 700; line-height: 1.2; color: var(--orange); white-space: nowrap; }
.ws-rcard__img { position: relative; margin-top: 2.4rem; aspect-ratio: 475 / 316; background: #b5b5b5; border-radius: .5rem; overflow: hidden; }
.ws-rcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.ws-rcard:hover .ws-rcard__img img { transform: scale(1.04); }
.ws-rcard__img::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.75)); mix-blend-mode: multiply; } /* 黒グラデ 0→75% MULTIPLY: 写真の下半分だけにかける */
.ws-rcard__num { position: absolute; right: 2.6rem; bottom: 1.8rem; z-index: 1; font-family: 'Barlow', 'Roboto', var(--font-en); font-size: 6.4rem; font-weight: 400; line-height: 1; letter-spacing: -.03em; color: var(--beige); } /* Figma: DIN 2014 Regular / style=IIColor/light01 */

/* ---------- 5つの学べること ---------- */
.ws-skills { margin-top: 24rem; }
.ws-skills__grid { display: grid; grid-template-columns: repeat(3, 47.5rem); gap: 4.8rem; width: 152rem; margin: 7.2rem 0 0 20rem; padding: 0; list-style: none; }
.ws-scard { min-height: 39.5rem; padding: 4.8rem; background: #fff; border-radius: .5rem; }
.ws-scard__num { display: block; padding-top: .1rem; font-family: 'Barlow', 'Roboto', var(--font-en); font-size: 6.4rem; font-weight: 400; line-height: 1; color: var(--orange); }
.ws-scard__ttl { margin-top: 1.6rem; font-family: 'Roboto', var(--font-ja); font-size: 3.2rem; font-weight: 600; line-height: 1; }
.ws-scard__kana { display: block; margin-top: .8rem; font-family: 'Roboto', var(--font-ja); font-size: 1.2rem; font-weight: 500; line-height: 1; }
.ws-scard__p { margin-top: 1.6rem; font-size: 1.6rem; font-weight: 400; line-height: 1.8; }
.ws-scard__ttl + .ws-scard__p { margin-top: 3.6rem; } /* 読み仮名なしのカードも本文の位置を揃える */

/* ---------- キャリアパス（フロー図） ---------- */
.ws-career { margin-top: 24rem; }
.ws-paths { display: grid; grid-template-columns: 99.7rem 47.5rem; gap: 4.8rem; align-items: start; width: 152rem; margin: 10.8rem 0 0 20rem; }
.ws-path__hd { display: flex; align-items: center; justify-content: center; height: 9.6rem; background: linear-gradient(to bottom, #ff4800, #ff7d20); border-radius: .5rem; font-size: 4rem; font-weight: 600; line-height: 1; color: #fff; }
.ws-path__body { position: relative; margin-top: 1.6rem; padding: 4.8rem; background: #fff; border-radius: .5rem; }
.ws-path--main .ws-path__body { height: 73.7rem; }
.ws-path--craft .ws-path__body { height: 73.9rem; }
.ws-path__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* 矢印・連結線（Figma の座標そのまま、viewBox = 白枠のサイズ） */
.ws-path__row { position: relative; display: flex; gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
.ws-path__row > li { flex: 1; }
.ws-pbox { position: relative; background: #fff; border-radius: .5rem; box-shadow: 0 .2rem 1.5rem rgba(0,0,0,.15); }
.ws-pbox--line { display: flex; align-items: center; justify-content: center; height: 10.4rem; border: 1px solid #e0e0e0; font-size: 2.4rem; font-weight: 600; line-height: 1; }
.ws-pbox--yellow { border: .4rem solid #ffdd78; padding: 3.2rem; }
.ws-pbox--fill { background: #ffdd78; }
.ws-pbox__ttl { margin: 0; font-size: 3.2rem; font-weight: 600; line-height: 1; text-align: center; }
.ws-pbox__p { margin-top: 2.4rem; font-size: 1.6rem; font-weight: 500; line-height: 1.6; }
.ws-pbox--manager { display: flex; align-items: center; justify-content: space-between; height: 12.2rem; margin-top: 8.9rem; padding: 3.2rem 4.8rem; }
.ws-pbox--manager .ws-pbox__ttl { width: 6.4rem; }
.ws-pbox--manager .ws-pbox__p { width: 46.8rem; margin: 0; font-size: 1.8rem; }
.ws-path__row--goal { gap: 4.8rem; margin-top: 8.1rem; }
.ws-path__row--goal > li { min-height: 24.6rem; }
.ws-pbox--craft { height: 19.8rem; padding: 3.2rem 2.4rem; }
.ws-pbox--master { height: 20.6rem; margin-top: 23.8rem; }
.ws-path__dn { display: none; } /* TB/SP 用の下向き矢印 */

/* ---------- キャリア事例（赤座 亮: 吹き出し + 階段グラフ） ----------
   Figma の _レイヤー_1（1520x938 のベクター図版）を HTML/CSS で再現。座標は図版内 px / 10 */
.ws-story { width: 152rem; margin: 16.2rem 0 0 20rem; color: #231815; }
.ws-story__profile { position: relative; width: 114rem; height: 24.4rem; background: #fff; border: .28rem solid #ee7a2b; border-radius: 1.4rem; }
.ws-story__photo { position: absolute; left: 3.8rem; top: 3rem; width: 17.6rem; height: 17.6rem; border-radius: 50%; overflow: hidden; }
.ws-story__photo img { width: 100%; height: 100%; object-fit: cover; }
.ws-story__name { position: absolute; left: 25.6rem; top: 4rem; display: flex; align-items: baseline; gap: 2.1rem; line-height: 1; }
.ws-story__name-ja { font-size: 3rem; font-weight: 600; }
.ws-story__name-en { font-size: 1.565rem; font-weight: 700; color: #ee7a2b; }
.ws-story__bio { position: absolute; left: 25.6rem; top: 10.8rem; font-size: 2rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.ws-story__tail { position: absolute; left: 10.9rem; top: 100%; width: 4.6rem; height: 4.6rem; }
/* 階段: 4 列を下端で揃え、上に年・役職ラベル、下に年収セル */
.ws-story__steps { display: grid; grid-template-columns: repeat(4, 38rem); align-items: end; margin: 2.9rem 0 0; padding: 0; list-style: none; counter-reset: none; }
.ws-step__label { display: flex; align-items: baseline; gap: 2.4rem; height: 5.1rem; margin-bottom: 1.8rem; padding-left: .1rem; line-height: 1; white-space: nowrap; }
.ws-step__year { font-size: 1.8rem; font-weight: 700; color: #ee7a2b; }
.ws-step__year b { margin-right: .2rem; font-family: 'Barlow', 'Roboto', var(--font-en); font-size: 3.6rem; font-weight: 600; }
.ws-step__role { font-size: 3.2rem; font-weight: 600; }
.ws-step__box { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.8rem; padding: 2rem 1rem; }
.ws-step--1 .ws-step__box { height: 18.1rem; background: linear-gradient(90deg, #f8b82d, #f3a82e); }
.ws-step--2 .ws-step__box { height: 23.6rem; background: linear-gradient(90deg, #f3a82e, #ee982e); }
.ws-step--3 .ws-step__box { height: 29.1rem; background: linear-gradient(90deg, #ee982e, #e8872f); }
.ws-step--4 .ws-step__box { height: 34.6rem; background: linear-gradient(90deg, #e8872f, #e3772f); }
.ws-step__box::after { content: ""; position: absolute; right: 0; top: -.6rem; border-style: solid; border-width: .6rem 0 .6rem 1.1rem; border-color: transparent transparent transparent #231815; } /* 段の右上の小さな矢印 */
.ws-step__box::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: #231815; } /* 段の上端を通って右上の三角までつながる線（Figma の階段のライン） */
@media (min-width: 1200px) { .ws-step__box { border-left: 1px solid #231815; } .ws-step:last-child .ws-step__box { border-right: 1px solid #231815; } } /* PC: 段ごとの縦線（階段の立ち上がり） */
.ws-step__ico { width: auto; height: 6rem; }
.ws-step--4 .ws-step__ico { height: 6.5rem; }
.ws-step__desc { font-size: 2.2rem; font-weight: 600; line-height: 1.5; text-align: center; }
.ws-step__salary { display: flex; align-items: center; height: 7.4rem; padding-left: 2.1rem; background: #fff; border: 1px solid #231815; font-size: 2.1rem; font-weight: 600; line-height: 1; white-space: nowrap; }
.ws-step + .ws-step .ws-step__salary { border-left: 0; }
.ws-step__salary b { margin: 0 .4rem; font-family: 'Barlow', 'Roboto', var(--font-en); font-size: 3.6rem; font-weight: 600; }
.ws-step__yen { align-self: center; width: 4.7rem; height: auto; margin-right: 2.7rem; }
/* 強み・ストーリー */
.ws-story__foot { display: flex; align-items: center; height: 13.8rem; margin-top: 3.85rem; background: #fff; }
.ws-story__tag { display: flex; align-items: center; gap: 2.8rem; flex: none; width: 30.8rem; height: 100%; padding-left: 2.9rem; background: #ee7a2b; color: #fff; clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%); font-size: 2.4rem; font-weight: 600; line-height: 1.65; }
.ws-story__star { width: 4.5rem; height: 4.5rem; flex: none; color: #f6f6f6; }
.ws-story__items { display: flex; align-items: center; height: 9rem; margin: 0 0 0 2.9rem; padding: 0; list-style: none; }
.ws-story__items li { display: flex; align-items: center; gap: 2.6rem; height: 100%; padding: 0 5rem 0 3.6rem; font-size: 2rem; font-weight: 600; line-height: 1.75; white-space: nowrap; }
.ws-story__items li:first-child { padding-left: 0; }
.ws-story__items li + li { border-left: .3rem dashed #ee7a2b; }
.ws-story__ico { width: auto; height: 6rem; }
.ws-story__ico--list { height: 5.8rem; }
.ws-story__ico--stairs { height: 6.5rem; }

/* ---------- 採用サブナビ（btn_set: 4 つのリンクを縦線で区切る） ---------- */
.ws-rnav { margin-top: 16rem; }
.ws-rnav ul { display: flex; justify-content: center; width: 108.8rem; margin: 0 auto; padding: 0; list-style: none; }
.ws-rnav li { display: flex; align-items: center; height: 5.8rem; padding: 0 1.6rem; border-left: 1px solid rgba(0,0,0,.5); }
.ws-rnav li:last-child { border-right: 1px solid rgba(0,0,0,.5); }
.ws-rnav a { display: block; width: 24rem; padding: 1.6rem 2.4rem; font-size: 2rem; font-weight: 600; line-height: 1.3; text-align: center; white-space: nowrap; transition: color .3s; }
.ws-rnav a:hover, .ws-rnav a[aria-current="page"] { color: var(--orange); }

/* ---------- ENTRY（Frame 812 1920x951: 黄色 #ffdd78 + 写真をブラウンで着色し 50% 暗く） ----------
   .page-bg の padding-bottom(30.8rem) を打ち消して波（.bottom）の下まで写真を敷く。見えている高さは Figma と同じ 95.1rem */
.entry-cta { position: relative; height: 115.1rem; margin: 24rem 0 -30.8rem; background: #ffdd78; overflow: hidden; }
.entry-cta__bg { position: absolute; inset: 0; isolation: isolate; }
.entry-cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.entry-cta__tint { position: absolute; inset: 0; background: #6d340c; mix-blend-mode: color; } /* Figma: fill #6d340c / COLOR */
.entry-cta__dim { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.entry-cta__link { position: absolute; left: 50%; top: 29.8rem; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; margin-left: -15.6rem; width: 31.2rem; }
.entry-cta__en { font-size: 9.6rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--orange); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.entry-cta__link:hover .entry-cta__en { transform: scale(1.05); }
.entry-cta__ja { font-size: 2.4rem; font-weight: 600; line-height: 1; color: #fff; }
.entry-cta__btns { position: absolute; left: 0; top: 55.4rem; z-index: 1; display: flex; justify-content: center; gap: 4rem; width: 100%; margin: 0; padding: 0; list-style: none; }
.entry-cta__btn { display: flex; align-items: center; justify-content: center; height: 10rem; padding: 0 5rem; background: #fff; border-radius: .5rem; font-size: 2.4rem; font-weight: 700; line-height: 1.5; white-space: nowrap; transition: background-color .3s, color .3s; }
.entry-cta__btns li:nth-child(2) .entry-cta__btn { padding: 0 7.4rem; } /* Figma: 292 幅 */
.entry-cta__btn:hover { background: var(--orange); color: #fff; }

/* =====================================================
   TB / SP 共通（〜1199px）
   ===================================================== */
@media (max-width: 1199px) {
  .ws-head-img { position: relative; left: auto; top: auto; width: 44%; margin: .8rem auto 0; } /* SP: パンくずを消した分だけ上へ（見出しが長いので重ねない） */
  .ws-head-img.reveal:not(.is-visible) { transform: translateY(3rem); }

  .ws-anchors { justify-content: flex-start; flex-wrap: wrap; gap: 1.2rem 2rem; margin: 2.4rem var(--pad-x) 0; }
  .ws-anchors a { font-size: 1.3rem; }

  .ws-sec-head { gap: 1.6rem; margin: 0 var(--pad-x); }
  .ws-sec-head__ja { font-size: 2.2rem; }
  .ws-sec-head__en { font-size: 1.2rem; }

  .ws-role { margin-top: 4.8rem; }
  .ws-role__top { flex-direction: column; }
  .ws-role__top .ws-sec-head { width: auto; padding-top: 0; }
  .ws-role__lead { width: auto; margin: 1.6rem var(--pad-x) 0; font-size: 1.5rem; line-height: 1.9; }
  .ws-roles { grid-template-columns: 1fr; gap: 3.2rem; width: auto; margin: 3.2rem var(--pad-x) 0; }
  .ws-rcard__head { height: auto; }
  .ws-rcard__ttl { font-size: 2.2rem; }
  .ws-rcard__en { font-size: 1.1rem; }
  .ws-rcard__img { margin-top: 1.2rem; }
  .ws-rcard__num { right: 1.3rem; bottom: .9rem; font-size: 4rem; }

  .ws-skills { margin-top: 6.4rem; }
  .ws-skills__grid { grid-template-columns: 1fr; gap: 1.6rem; width: auto; margin: 2.4rem var(--pad-x) 0; }
  .ws-scard { min-height: 0; padding: 2.4rem 2rem 2.8rem; }
  .ws-scard__num { font-size: 4rem; }
  .ws-scard__ttl { margin-top: 1.2rem; font-size: 2rem; }
  .ws-scard__kana { margin-top: .6rem; font-size: 1.1rem; }
  .ws-scard__p { margin-top: 1.2rem; font-size: 1.3rem; line-height: 1.8; }
  .ws-scard__ttl + .ws-scard__p { margin-top: 2.9rem; }

  .ws-career { margin-top: 6.4rem; }
  .ws-paths { grid-template-columns: 1fr; gap: 3.2rem; width: auto; margin: 2.4rem var(--pad-x) 0; }
  .ws-path__hd { height: 5.6rem; font-size: 2.2rem; }
  .ws-path__body, .ws-path--main .ws-path__body, .ws-path--craft .ws-path__body { height: auto; margin-top: 1rem; padding: 2rem 1.6rem; }
  .ws-path__lines { display: none; }
  .ws-path__dn { display: block; position: relative; width: .3rem; height: 2.4rem; margin: 1.2rem auto; background: var(--orange); }
  .ws-path__dn::after { content: ""; position: absolute; left: 50%; bottom: -.8rem; margin-left: -.7rem; border-style: solid; border-width: .9rem .7rem 0 .7rem; border-color: var(--orange) transparent transparent transparent; }
  .ws-path__row { gap: .8rem; }
  .ws-pbox--line { height: 5.6rem; font-size: 1.3rem; }
  .ws-pbox__ttl { font-size: 2rem; }
  .ws-pbox__p { margin-top: 1.2rem; font-size: 1.3rem; line-height: 1.7; }
  .ws-pbox--yellow { border-width: .3rem; padding: 2rem 1.6rem; }
  .ws-pbox--manager { flex-direction: column; align-items: stretch; height: auto; margin-top: 0; padding: 2rem 1.6rem; }
  .ws-pbox--manager .ws-pbox__ttl { width: auto; }
  .ws-pbox--manager .ws-pbox__p { width: auto; margin-top: 1.2rem; font-size: 1.3rem; }
  .ws-path__row--goal { flex-direction: column; gap: 1.2rem; margin-top: 0; }
  .ws-path__row--goal > li { min-height: 0; }
  .ws-pbox--craft { height: auto; padding: 2rem 1.6rem; }
  .ws-pbox--master { height: auto; margin-top: 0; }

  .ws-story { width: auto; margin: 4.8rem var(--pad-x) 0; }
  .ws-story__profile { display: grid; grid-template-columns: 8rem 1fr; gap: .8rem 1.6rem; align-items: start; width: auto; height: auto; padding: 2rem 1.6rem 2rem; border-width: .2rem; border-radius: 1rem; }
  .ws-story__photo { position: static; grid-row: 1 / span 2; width: 8rem; height: 8rem; }
  .ws-story__name { position: static; flex-wrap: wrap; gap: .6rem 1rem; padding-top: .8rem; }
  .ws-story__name-ja { font-size: 2.2rem; }
  .ws-story__name-en { font-size: 1.2rem; }
  .ws-story__bio { position: static; grid-column: 2; font-size: 1.3rem; line-height: 1.6; white-space: normal; }
  .ws-story__tail { left: 3.6rem; width: 3rem; height: 3rem; }
  .ws-story__steps { grid-template-columns: 1fr; gap: 1.6rem; align-items: stretch; margin-top: 3.2rem; }
  .ws-step__label { gap: 1.2rem; height: auto; margin-bottom: .8rem; }
  .ws-step__year { font-size: 1.3rem; }
  .ws-step__year b { font-size: 2.4rem; }
  .ws-step__role { font-size: 2rem; }
  .ws-step .ws-step__box { flex-direction: row; justify-content: flex-start; gap: 1.6rem; height: auto; min-height: 9rem; padding: 1.6rem 2rem; }
  .ws-step__box::after { top: -.5rem; border-width: .5rem 0 .5rem .9rem; }
  .ws-step__ico, .ws-step--4 .ws-step__ico { height: 4rem; }
  .ws-step__desc { font-size: 1.5rem; text-align: left; }
  .ws-step__salary { height: 5.2rem; padding-left: 1.6rem; font-size: 1.5rem; }
  .ws-step + .ws-step .ws-step__salary { border-left: 1px solid #231815; }
  .ws-step__salary b { font-size: 2.6rem; }
  .ws-step__yen { width: 3.2rem; margin-right: 1.6rem; }
  .ws-story__foot { flex-direction: column; align-items: stretch; height: auto; margin-top: 1.6rem; }
  .ws-story__tag { gap: 1.2rem; width: 100%; height: 5.6rem; padding-left: 1.6rem; clip-path: none; font-size: 1.6rem; line-height: 1.3; }
  .ws-story__tag br { display: none; }
  .ws-story__star { width: 2.4rem; height: 2.4rem; }
  .ws-story__items { flex-direction: column; align-items: stretch; height: auto; margin: 0; padding: .4rem 1.6rem; }
  .ws-story__items li { gap: 1.6rem; height: auto; padding: 1.2rem 0; font-size: 1.4rem; line-height: 1.6; white-space: normal; }
  .ws-story__items li + li { border-left: 0; border-top: .2rem dashed #ee7a2b; }
  .ws-story__ico, .ws-story__ico--list, .ws-story__ico--stairs { width: 3.6rem; height: 3.6rem; object-fit: contain; }

  .ws-rnav { margin: 6.4rem var(--pad-x) 0; }
  .ws-rnav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; width: auto; background: rgba(0,0,0,.3); border: 1px solid rgba(0,0,0,.3); }
  .ws-rnav li { height: auto; padding: 0; border: 0; background: var(--beige); }
  .ws-rnav li:last-child { border: 0; }
  .ws-rnav a { width: 100%; padding: 1.4rem .8rem; font-size: 1.4rem; }

  .entry-cta { height: auto; margin: 6.4rem 0 -9.4rem; padding: 6.4rem var(--pad-x) calc(6.4rem + 9.4rem); } /* page-bg の padding-bottom(6.4rem + 3rem) ぶんを打ち消す */
  .entry-cta__link { position: relative; left: auto; top: auto; width: auto; margin: 0 auto; gap: 1rem; }
  .entry-cta__en { font-size: 6.4rem; }
  .entry-cta__ja { font-size: 1.6rem; }
  .entry-cta__btns { position: relative; top: auto; flex-direction: column; align-items: center; gap: 1.2rem; margin-top: 3.2rem; }
  .entry-cta__btns li { width: 100%; max-width: 30rem; }
  .entry-cta__btn, .entry-cta__btns li:nth-child(2) .entry-cta__btn { height: 6.4rem; padding: 0 2rem; font-size: 1.6rem; }
}

/* =====================================================
   TB のみ（768〜1199px）
   ===================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
  .ws-head-img { width: 46%; margin-top: 2.4rem; } /* パンくずと重ならないように */

  .ws-anchors { justify-content: flex-end; gap: 3.2rem; margin-top: 3.2rem; }
  .ws-anchors a { font-size: 1.5rem; }

  .ws-sec-head { gap: 2.4rem; }
  .ws-sec-head__ja { font-size: 3.2rem; }
  .ws-sec-head__en { font-size: 1.5rem; }

  .ws-role { margin-top: 8rem; }
  .ws-role__lead { margin-top: 2.4rem; font-size: 1.8rem; }
  .ws-roles { grid-template-columns: repeat(3, 1fr); gap: 2.4rem; margin-top: 4rem; }
  .ws-rcard__ttl { font-size: 2.2rem; }
  .ws-rcard__en { font-size: 1rem; }
  .ws-rcard__num { right: 1rem; bottom: .7rem; font-size: 3.6rem; }

  .ws-skills { margin-top: 10rem; }
  .ws-skills__grid { grid-template-columns: 1fr 1fr; gap: 2.4rem; margin-top: 3.2rem; }
  .ws-scard { padding: 3.2rem 2.8rem 3.6rem; }
  .ws-scard__num { font-size: 4.8rem; }
  .ws-scard__ttl { font-size: 2.4rem; }
  .ws-scard__p { font-size: 1.4rem; }
  .ws-scard__ttl + .ws-scard__p { margin-top: 2.9rem; }

  .ws-career { margin-top: 10rem; }
  .ws-paths { gap: 4rem; margin-top: 3.2rem; }
  .ws-path__hd { height: 6.4rem; font-size: 2.6rem; }
  .ws-path__body, .ws-path--main .ws-path__body, .ws-path--craft .ws-path__body { padding: 3.2rem; }
  .ws-path__row { gap: 1.6rem; }
  .ws-pbox--line { height: 7.2rem; font-size: 1.8rem; }
  .ws-pbox__ttl { font-size: 2.4rem; }
  .ws-pbox__p { font-size: 1.4rem; }
  .ws-pbox--yellow { padding: 2.4rem 2.4rem; }
  .ws-pbox--manager { flex-direction: row; align-items: center; padding: 2.4rem 3.2rem; }
  .ws-pbox--manager .ws-pbox__ttl { width: 8rem; flex: none; }
  .ws-pbox--manager .ws-pbox__p { margin: 0 0 0 3.2rem; font-size: 1.5rem; }
  .ws-path__row--goal { flex-direction: row; gap: 2.4rem; }
  .ws-pbox--craft { padding: 2.4rem; }

  .ws-story { margin-top: 8rem; }
  .ws-story__profile { grid-template-columns: 12rem 1fr; gap: 1rem 2.4rem; padding: 2.8rem 2.4rem; }
  .ws-story__photo { width: 12rem; height: 12rem; }
  .ws-story__name-ja { font-size: 2.8rem; }
  .ws-story__name-en { font-size: 1.4rem; }
  .ws-story__bio { font-size: 1.5rem; line-height: 1.7; }
  .ws-story__tail { left: 5rem; width: 3.6rem; height: 3.6rem; }
  .ws-story__steps { grid-template-columns: 1fr 1fr; gap: 2.4rem 1.6rem; margin-top: 4rem; }
  .ws-step__year { font-size: 1.5rem; }
  .ws-step__year b { font-size: 2.8rem; }
  .ws-step__role { font-size: 2.4rem; }
  .ws-step .ws-step__box { min-height: 11rem; padding: 2rem 2.4rem; }
  .ws-step__ico, .ws-step--4 .ws-step__ico { height: 4.8rem; }
  .ws-step__desc { font-size: 1.6rem; }
  .ws-step__salary { height: 6rem; font-size: 1.7rem; }
  .ws-step__salary b { font-size: 3rem; }
  .ws-step__yen { width: 3.6rem; }
  .ws-story__foot { flex-direction: row; align-items: stretch; margin-top: 2.4rem; }
  .ws-story__tag { flex: none; width: 20rem; height: auto; padding: 2rem 1.6rem 2rem 2rem; clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%); font-size: 1.7rem; }
  .ws-story__tag br { display: inline; }
  .ws-story__star { width: 3rem; height: 3rem; }
  .ws-story__items { flex: 1; padding: .8rem 1.6rem .8rem 2rem; }
  .ws-story__items li { font-size: 1.5rem; }

  .ws-rnav { margin-top: 10rem; }
  .ws-rnav ul { grid-template-columns: repeat(4, 1fr); }
  .ws-rnav a { padding: 1.6rem .4rem; font-size: 1.5rem; }

  .entry-cta { margin: 10rem 0 -26rem; padding: 10rem var(--pad-x) calc(10rem + 26rem); } /* page-bg の padding-bottom(18rem + 8rem) ぶんを打ち消す */
  .entry-cta__link { gap: 1.4rem; }
  .entry-cta__en { font-size: 8rem; }
  .entry-cta__ja { font-size: 2rem; }
  .entry-cta__btns { flex-direction: row; gap: 2rem; margin-top: 4.8rem; }
  .entry-cta__btns li { width: auto; max-width: none; }
  .entry-cta__btn, .entry-cta__btns li:nth-child(2) .entry-cta__btn { height: 7.2rem; padding: 0 3.2rem; font-size: 1.8rem; }
}

/* SP: ページ内リンクは 3 等分のインデックス（下にオレンジの丸矢印。タップでオレンジに） */
@media (max-width: 767px) {
  .ws-anchors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 3.2rem var(--pad-x) 0; }
  .ws-anchors a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; padding: 0 .4rem; border-bottom: 0; font-size: 1.3rem; font-weight: 700; line-height: 1.3; text-align: center; letter-spacing: .02em; }
  .ws-anchors a::after { content: ""; width: 2rem; height: 2rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23ff7d20'/%3E%3Cpath d='M6.5 8.5 10 12l3.5-3.5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
  .ws-anchors a:hover, .ws-anchors a:active { color: var(--orange); }
  .ws-anchors a:hover::after, .ws-anchors a:active::after { transform: translateY(.3rem); }
}
/* SP: キャリアのステップは縦に並ぶので、段の右上の横向き三角は出さず、キャリアパスと同じ下向き矢印でつなぐ / 強み・ストーリーの上を空ける */
@media (max-width: 1199px) { /* SP・TB 共通 */
  .ws-step__box::after, .ws-step__box::before { display: none; } /* 縦並びでは段をつなぐ三角と線は出さない */
  /* 左に余白をとり、1 本の長い下向き矢印（キャリアパスと同じ線 + 三角）で 4 段をつなぐ。始まり＝1 段目の上端、三角の先＝最後の段の下端 */
  .ws-story__steps { position: relative; gap: 2.4rem; padding-left: 3.2rem; }
  .ws-story__steps::before { content: ""; position: absolute; left: .75rem; top: 0; bottom: 1.2rem; width: .5rem; background: linear-gradient(var(--orange), #ff4800); }
  .ws-story__steps::after { content: ""; position: absolute; left: 0; bottom: 0; border-style: solid; border-width: 1.3rem 1rem 0 1rem; border-color: #ff4800 transparent transparent transparent; }
  .ws-story__foot { margin-top: 4rem; }
}
@media (max-width: 767px) { .entry-cta__en { font-size: 4.8rem; } } /* SP: ENTRY の文字を小さく（採用ページ共通でそろえる） */
/* SP: 左の長い矢印も段と一緒にフェードイン（線は上から伸び、最後に三角が出る） */
@media (max-width: 1199px) { /* SP・TB 共通 */
  .ws-story__steps.reveal::before { opacity: 0; transform: scaleY(0); transform-origin: top; transition: opacity .8s ease, transform 1.4s cubic-bezier(.4,0,.2,1); }
  .ws-story__steps.reveal::after { opacity: 0; transform: translateY(-1rem); transition: opacity .6s ease 1.2s, transform .6s cubic-bezier(.2,.8,.2,1) 1.2s; }
  .ws-story__steps.reveal.is-visible::before { opacity: 1; transform: none; }
  .ws-story__steps.reveal.is-visible::after { opacity: 1; transform: none; }
}
@media (max-width: 767px) { .ws-anchors a + a { border-left: 1px solid rgba(0,0,0,.15); } } /* SP: 項目のあいだに縦線だけ */
@media (min-width: 768px) and (max-width: 1199px) { .entry-cta__btn, .entry-cta__btns li:nth-child(n) .entry-cta__btn { height: 5.6rem; } } /* TB: ENTRY のボタンを低く（採用ページ共通でそろえる） */
@media (min-width: 768px) and (max-width: 1199px) { .entry-cta__en { font-size: 6.4rem; } } /* TB: ENTRY の文字を少し小さく（採用ページ共通） */
@media (min-width: 768px) and (max-width: 1199px) { .entry-cta { padding-top: 16.9rem; padding-bottom: 29.1rem; } } /* TB: ENTRY の中身を見えている写真の範囲で縦中央に */

@media (min-width: 768px) and (max-width: 1199px) { .ws-story__steps { grid-template-columns: 1fr; gap: 2.4rem; padding-left: 4rem; } .ws-story__steps::before { left: 1.25rem; } .ws-story__steps::after { left: .5rem; } } /* TB: キャリアのステップもスマホと同じく 1 列 + 左の長い矢印 */
/* TB: 各段のオレンジ（仕事内容）と白（年収）を横並びに */
@media (min-width: 768px) and (max-width: 1199px) {
  .ws-step { display: grid; grid-template-columns: 1fr 26rem; grid-template-areas: "label label" "box salary"; align-items: stretch; }
  .ws-step__label { grid-area: label; }
  .ws-step .ws-step__box { grid-area: box; }
  .ws-step__salary, .ws-step + .ws-step .ws-step__salary { grid-area: salary; height: auto; border-left: 0; justify-content: center; align-items: center; flex-wrap: nowrap; padding-left: 0; white-space: nowrap; }
  .ws-step__salary > * { line-height: 1; }
}
/* TB: 仕事紹介カードの数字を小さく */
@media (min-width: 768px) and (max-width: 1199px) {
  .ws-rcard__num { right: .9rem; bottom: .6rem; font-size: 2.8rem; }
}
/* SP: ENTRY は採用ページ共通の形に（短いボタンを中央に縦 3 つ・矢印なし） */
@media (max-width: 767px) {
  .entry-cta__btns { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; margin-top: 3.2rem; }
  .entry-cta__btns li { width: 24rem; max-width: none; }
  .entry-cta__btn, .entry-cta__btns li:nth-child(n) .entry-cta__btn { width: 100%; height: 5.2rem; padding: 0 1.6rem; justify-content: center; font-size: 1.5rem; }
  .entry-cta__btn .btn__arrow { display: none; }
  .entry-cta__ja { font-size: 1.6rem; }
}
@media (max-width: 767px) { .entry-cta { padding-top: 8rem; padding-bottom: 14.1rem; } } /* SP: ENTRY の上下の空きをそろえる（文字の上・ボタンの下とも 80px） */