@charset "UTF-8";

/* ===================================
    03｜仕事を知る（work/index.html）
    Figma: PC 3313-20761 / SP 3313-22671
    ・赤地 → PHILOSOPHY（写真の上に白文字）→ 白い角丸パネル（WORK STYLE / SCHEDULE / JOB）
    ・PHILOSOPHY の4つの円は SVG（円と弧）＋ HTML テキスト（ラベル）で組む
=================================== */
.main--work {
  padding-top: 0;
  background: var(--color-main);
  overflow-x: clip;
}

/* ===================================
    ヒーロー
=================================== */
.wkHero {
  position: relative;
  height: 70.3rem;
}

.wkHero__img {
  position: absolute;
  top: 13.055rem;
  left: 54.2rem;
  right: 0;
  height: 52.6rem;
  border-radius: 5rem;
  overflow: hidden;
}

.wkHero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wkHero__body {
  position: absolute;
  top: 24.455rem;
  left: 10.8rem;
  width: 38rem;
  color: #fff;
}

.wkHero__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.wkHero__en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 8rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin-bottom: -0.7rem;
}

.wkHero__ja {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.44;
  letter-spacing: 0.06em;
}

.wkHero__lead {
  margin-top: 5rem;
  font-size: 1.5rem;
  line-height: 1.867;
}

/* ===================================
    S01 PHILOSOPHY（写真の上に白文字）
=================================== */
.philosophy {
  position: relative;
  border-radius: 6rem;
  overflow: hidden;
  background: url(../images/work/bgPhilosophy.webp) 43% center / cover no-repeat;
  color: #fff;
}

.philosophy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

/* 見出し・本文・図は Figma どおりの絶対配置なので、高さは Figma の枠（1724px）で持たせる。
   （以前は下に流していた「5つの約束」が高さを作っていたが、確定版で削除された） */
.philosophy__inner {
  position: relative;
  display: flow-root;
  min-height: 172.4rem;
}

.philosophy__title {
  position: absolute;
  left: 14.2rem;
  top: 14.892rem;
  color: #fff;
}

.philosophy__creed {
  position: absolute;
  left: 14.2rem;
  top: 36.582rem;
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 5.4874rem;
  line-height: 1.596;
  letter-spacing: -0.04em;
}

.philosophy__body {
  position: absolute;
  left: 14.8rem;
  top: 58.582rem;
  width: 55.1rem;
  font-size: 1.4rem;
  line-height: 2.929;
  letter-spacing: 0.02em;
}

/* ---- 4つの円の図 ---- */
.wkChart {
  position: absolute;
  left: 59.8rem;
  top: 94.091rem;
  width: 70.13rem;
  height: 61.654rem;
}

/* 線（円・つなぎ線・外の円弧）はすべて .wkChart__svg の中。
   pathLength="1" にしてあるので、dasharray / dashoffset の 1 が線1本ぶんの長さになる。
   図が4割ほど見えたら（.JsWkChart → work/index.js が .is-active）中央の円 → つなぎ線 → 外の円 → 外の円弧の順に描く */
.wkChart__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wkChart__line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.wkChart.is-active .wkChart__line {
  stroke-dashoffset: 0;
}

/* 円は描き始めの点から左右へ同時に伸ばし、反対側で閉じる。
   線の長さ（dasharray の1つ目）を 0 → 1 に伸ばしながら、dashoffset を長さの半分だけずらし続けると
   線の中心が描き始めの点に留まる。描き始めの点は SVG 側の rotate で決めている
   （中央の円＝上、外の円＝中央を向いた側） */
.wkChart__line--self,
.wkChart__line--circle {
  stroke-dasharray: 0 1;
  stroke-dashoffset: 0;
}

.wkChart.is-active .wkChart__line--self,
.wkChart.is-active .wkChart__line--circle {
  stroke-dasharray: 1 0;
  stroke-dashoffset: 0.5;
}

.wkChart.is-active .wkChart__line--self {
  transition: stroke-dasharray 0.32s cubic-bezier(0.65, 0, 0.35, 1), stroke-dashoffset 0.32s cubic-bezier(0.65, 0, 0.35, 1);
}

.wkChart.is-active .wkChart__line--link {
  transition: stroke-dashoffset 0.1s ease-out 0.27s;
}

.wkChart.is-active .wkChart__line--circle {
  transition: stroke-dasharray 0.32s cubic-bezier(0.65, 0, 0.35, 1) 0.33s, stroke-dashoffset 0.32s cubic-bezier(0.65, 0, 0.35, 1) 0.33s;
}

.wkChart.is-active .wkChart__line--arc {
  transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1) 0.56s;
}

.wkChart__label {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 2.6041rem;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}

.wkChart__label--customer {
  left: 34.742rem;
  top: 8.94rem;
}

.wkChart__label--self {
  left: 35.123rem;
  top: 35.413rem;
  font-size: 2.8645rem;
}

.wkChart__label--crew {
  left: 11.019rem;
  top: 48.534rem;
}

.wkChart__label--company {
  left: 59.088rem;
  top: 48.534rem;
}

/* 文字は自分の円が描かれるのに合わせて出す */
.wkChart__label {
  opacity: 0;
}

.wkChart.is-active .wkChart__label {
  opacity: 1;
  transition: opacity 0.25s ease 0.46s;
}

.wkChart.is-active .wkChart__label--self {
  transition-delay: 0.16s;
}

@media (prefers-reduced-motion: reduce) {
  .wkChart__line,
  .wkChart__line--self,
  .wkChart__line--circle {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }

  .wkChart__label {
    opacity: 1;
  }

  .wkChart.is-active .wkChart__line,
  .wkChart.is-active .wkChart__label {
    transition: none;
  }
}

/* ---- 信念と5つの約束 ---- */
.wkPromise {
  /* 絶対配置の図の下に置く */
  margin-top: 167rem;
  width: 112rem;
  margin-inline: auto;
}

.wkPromise__lead {
  width: 82rem;
  margin-inline: auto;
  font-size: 1.5rem;
  line-height: 2;
  letter-spacing: 0.02em;
  text-align: center;
}

.wkPromise__list {
  display: flex;
  gap: 2rem;
  margin-top: 4.4rem;
}

.wkPromise__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding: 3rem 2rem;
  background: #fff;
  border-radius: 2rem;
  text-align: center;
  color: var(--color-main);
}

.wkPromise__no {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 1.2;
}

.wkPromise__text {
  margin-top: 1.2rem;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.714;
}

/* ===================================
    白パネル（WORK STYLE / SCHEDULE / JOB）
=================================== */
.wkPanel {
  width: 138rem;
  max-width: calc(100% - 6rem);
  margin: 4rem auto 0;
  background: #fff;
  border-radius: 5rem;
}

.wkStyle,
.wkSchedule {
  padding: 15rem 13rem 0;
}

.wkJob {
  padding: 15rem 13rem 13rem;
}

/* PC は Figma 3770-59751 どおり WORK STYLE / SCHEDULE / JOB を別々の白パネルにする
   （間 40px・角丸 50px・上 120 / 左右・下 130）。Tab / SP は 1枚の白パネルのまま */
@media screen and (min-width: 1025px) {
  .wkPanel {
    background: none;
    border-radius: 0;
  }

  .wkStyle,
  .wkSchedule,
  .wkJob {
    padding: 12rem 13rem 13rem;
    background: #fff;
    border-radius: 5rem;
  }

  .wkSchedule,
  .wkJob {
    margin-top: 4rem;
  }
}

.wkNote {
  margin-top: 2.4rem;
  font-size: 1.2rem;
  line-height: 1.75;
  color: #757575;
}

/* 原稿待ちのタブに出す断り書き */
.wkPanelNote {
  margin-bottom: 1.6rem;
  font-size: 1.2rem;
  line-height: 1.75;
  color: var(--color-main);
}

/* ===================================
    S02 WORK STYLE
=================================== */
.wkStyle__intro {
  display: flex;
  align-items: center;
  gap: 4rem;
  margin-top: 5rem;
}

.wkStyle__img {
  width: 55.6rem;
  height: 34.8rem;
  flex-shrink: 0;
  border-radius: 3rem;
  overflow: hidden;
}

.wkStyle__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wkStyle__text {
  flex: 1;
  min-width: 0;
}

.wkStyle__catch {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1.615;
  color: #212121;
}

.wkStyle__desc {
  margin-top: 2rem;
  font-size: 1.4rem;
  line-height: 1.786;
  color: #212121;
}

/* ---- グレーの囲み（3つの業務 / 店舗での役割） ---- */
.wkBox {
  margin-top: 5rem;
  padding: 2.9rem 2.2rem 2.2rem;
  background: var(--color-gray);
  border-radius: 3rem;
}

/* Figma：見出しは 11px 内側に縦線（4×26）、文字はその 12px 右 */
.wkBox__title {
  display: flex;
  align-items: center;
  padding-left: 0.9rem;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.6;
  color: #212121;
}

.wkBox__title::before {
  content: "";
  flex-shrink: 0;
  width: 0.4rem;
  height: 2.6rem;
  margin-right: 1.2rem;
  border-radius: 0.2rem;
  background: var(--color-main);
}

/* SP だけアコーディオンにするボタン。PC は見出しとして置くだけ */
.wkBox__btn {
  font: inherit;
  color: inherit;
  text-align: left;
  pointer-events: none;
}

.wkBox__icon {
  display: none;
}

.wkTask__list {
  display: flex;
  gap: 2.3rem;
  margin-top: 1.4rem; /* 見出しの行ボックス 32px − Figma の行 26px ぶんを引いて 20px */
}

.wkTask {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.wkTask__img {
  display: block;
  height: 18rem;
  margin-bottom: -1.5rem;
  border-radius: 2rem 2rem 0 0;
  overflow: hidden;
}

.wkTask__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 素材支給待ちの枠 */
.wkTask__noimg {
  display: block;
  width: 100%;
  height: 100%;
  background: #d9d9d9;
}

.wkTask__body {
  position: relative; /* 写真（インライン要素＝背景より後に描かれる）の上に重ねる */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  padding: 2rem;
  background: #fff;
  border-radius: 2rem;
}

.wkTask__title {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.75;
  color: var(--color-text);
}

.wkTask__text {
  font-size: 1.4rem;
  line-height: 1.857;
  color: #212121;
}

.wkRole__list {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.4rem;
}

.wkRole {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding: 2.3rem 2.6rem 2.6rem;
  background: #fff;
  border-radius: 2rem;
}

.wkRole__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13.6rem;
  height: 3.6rem;
  border-radius: 200px;
  background: var(--color-main);
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.571;
  color: #fff;
}

.wkRole__text {
  align-self: stretch;
  margin-top: 1.4rem;
  font-size: 1.4rem;
  line-height: 1.857;
  color: #212121;
}

/* ===================================
    タブ（SCHEDULE / JOB 共通）
=================================== */
.wkTabs {
  display: flex;
  gap: 1.2rem;
  margin-top: 4.8rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.wkTabs::-webkit-scrollbar {
  display: none;
}

.wkTab {
  flex-shrink: 0;
  padding: 1.2rem 2.6rem;
  border: 0.2rem solid var(--color-main);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.714;
  letter-spacing: 0.02em;
  color: var(--color-main);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.wkTab.is-active {
  background: var(--color-main);
  color: #fff;
}

.wkPanelBox {
  margin-top: 6.4rem;
}

/* ===================================
    S03 SCHEDULE（勤務イメージ＝ガントチャート）

    時刻・業務名は画像に焼かず HTML テキストで持つ。棒の位置と幅は
    各要素のインラインカスタムプロパティ（--s / --e ＝ 開始・終了の時刻）から
    CSS が計算する。原稿差し替えは HTML の数値だけ直せばよい。
      --axis-x … 9時の目盛りの X 座標   --hour-w … 1時間あたりの幅
=================================== */
.wkSchedule .wkTab {
  width: 10.9rem;
  padding-inline: 0;
  text-align: center;
}

.wkSchedule .wkPanelBox {
  margin-top: 3rem;
}

.wkTime {
  --hour-w: 6rem;
  --axis-x: 12.4rem;
  --case-x: 0rem;
  --case-w: 10rem;
  --case-col-w: 11.2rem;
  --unit-w: 11.2rem;
  --head-h: 4rem;
  --row-h: 4.4rem;
  --row-gap: 5.2rem;
  --rows-top: 3.4rem;
  --rows-bottom: 2.2rem;
  --grid-h: 29.2rem;
  --edge-y: -2.4rem;
  --task-inset: 0.2rem;
  /* チャート実寸 1024px ＋ 右端「24」のはみ出しぶん */
  --chart-w: 105.4rem;
}

.wkTime__title {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.6;
  color: #212121;
}

.wkTime__panel {
  margin-top: 1.8rem;
  padding: 4.4rem 4.8rem;
  background: var(--color-gray);
  border-radius: 3rem;
}

/* チャート実寸は 1024px（SP は 1066px）。入りきらない幅では横スクロールする。
   右端の目盛り「24」がパネルの右パディングにはみ出すぶんだけ表示域を広げる */
.wkTime__scroll {
  margin-right: -3rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.wkTime__scroll::-webkit-scrollbar {
  display: none;
}

.wkTime__chart {
  position: relative;
  width: var(--chart-w);
}

/* ---- 時間軸（9〜24時の目盛りと縦のグリッド） ---- */
.wkTime__axis {
  position: relative;
  height: var(--head-h);
  /* （時）は唯一のインライン要素。行ボックスのズレを消して上端に揃える */
  font-size: 0;
  line-height: 0;
}

/* （時）と CASE ラベルの列は横スクロールしても左に貼り付く。
   下を流れる目盛り・棒を隠すため、横スクロールする Tab / SP では
   要素自体が灰色の下地を兼ねる（PC は実寸で収まるので下地なし＝点線が透ける） */
.wkTime__unit {
  position: sticky;
  left: 0;
  z-index: 2;
  display: inline-block;
  vertical-align: top;
  width: var(--case-col-w);
  height: var(--head-h);
  padding-left: var(--case-x);
  padding-right: calc(var(--case-col-w) - var(--case-x) - var(--unit-w));
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.5;
  text-align: right;
  color: rgba(33, 33, 33, 0.68);
}

.wkTime__hour {
  position: absolute;
  top: 0;
  left: calc(var(--axis-x) + (var(--h) - 9) * var(--hour-w));
  width: 6rem;
  margin-left: -3rem;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.429;
  text-align: center;
  color: rgba(33, 33, 33, 0.68);
}

.wkTime__hour--key {
  font-weight: 700;
  color: var(--color-main);
}

.wkTime__flag {
  position: absolute;
  top: 2rem;
  left: 0;
  width: 100%;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.333;
  text-align: center;
}

.wkTime__line {
  position: absolute;
  top: var(--head-h);
  left: calc(var(--axis-x) + (var(--h) - 9) * var(--hour-w));
  width: 0.1rem;
  height: var(--grid-h);
  background: rgba(33, 33, 33, 0.09);
}

.wkTime__line--key {
  background: rgba(33, 33, 33, 0.28);
}

/* ---- CASE の行 ---- */
.wkTime__rows {
  position: relative;
  padding: var(--rows-top) 0 var(--rows-bottom);
}

.wkTime__row {
  position: relative;
  height: var(--row-h);
}

.wkTime__row + .wkTime__row {
  margin-top: var(--row-gap);
}

.wkTime__row + .wkTime__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: -3rem;
  width: 100%;
  border-top: 0.1rem dashed rgba(33, 33, 33, 0.2);
}

.wkTime__case {
  position: sticky;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  width: var(--case-col-w);
  height: 100%;
  padding-left: var(--case-x);
}

/* 出勤／退勤のラベルと行間の点線も、この列の下を通るので隠す
   （行に負のマージンを付けるとマージン相殺で行ごと動くため、擬似要素で伸ばす） */
.wkTime__case::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 3rem;
}

.wkTime__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--case-w);
  height: var(--row-h);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.467;
  letter-spacing: 0.02em;
  color: var(--color-main);
}

.wkTime__edge {
  position: absolute;
  top: var(--edge-y);
  left: calc(var(--axis-x) + (var(--h) - 9) * var(--hour-w));
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.5;
  white-space: nowrap;
  color: #212121;
}

.wkTime__edge--out {
  transform: translateX(-100%);
}

.wkTime__task {
  position: absolute;
  top: 0;
  left: calc(var(--axis-x) + (var(--s) - 9) * var(--hour-w) + var(--task-inset));
  width: calc((var(--e) - var(--s)) * var(--hour-w) - var(--task-inset) * 2);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.8rem;
  border-radius: 1rem;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.429;
  text-align: center;
  white-space: nowrap;
  color: #fff;
}

.wkTime__task--prep,
.wkTime__task--close {
  background: #212121;
}

.wkTime__task--hall {
  background: var(--color-main);
}

.wkTime__task--kitchen {
  background: var(--color-accent);
}

/* マネジメント業務だけ枠に対して長い。<wbr> を入れた位置でだけ折り返す
   （keep-all を付けないと「マネジメント業／務」のように途中で切れる） */
.wkTime__task--manage {
  background: #8f1014;
  white-space: normal;
  word-break: keep-all;
  line-height: 1.286;
}

.wkTime__task--break {
  background: #fff;
  color: var(--color-main);
}

.wkTime__task--close {
  font-size: 1.2rem;
}

/* 横スクロールのつまみは Tab / SP のみ（PC は実寸で収まる） */
.wkTime__bar {
  display: none;
}

/* ===================================
    S04 JOB（業務カードのスライダー）
=================================== */
.wkJob .wkTab {
  width: 15.4rem;
  padding-inline: 0;
  text-align: center;
}

.wkJob__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 2.4rem;
}

.wkJob .wkTabs {
  margin-top: 0;
}

.wkJob .wkPanelBox {
  margin-top: 3rem;
}

.wkJob__nav {
  display: flex;
  flex-shrink: 0;
  gap: 1.2rem;
}

.wkJob__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.8rem;
  height: 5.8rem;
  border: 0.2rem solid var(--color-main);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: background 0.3s ease;
}

.wkJob__arrow img {
  width: 2rem;
  height: auto;
}

.wkJob__arrow--prev img {
  transform: scaleX(-1);
}

/* カード列は白パネルの左右の端まではみ出す（セクションの左右パディングぶん。
   padding で戻して、1枚目は本文の左端に・最後までスクロールしたら同じ余白を残す） */
.wkJob__list {
  margin-inline: -13rem;
  padding-inline: 13rem; /* 最後のカードの後ろにも左と同じ余白を残す */
}

.wkJob__list .swiper-wrapper {
  align-items: stretch;
}

.wkJobCard {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 36.1rem;
  height: auto;
  background: var(--color-gray);
  border-radius: 2rem;
  overflow: hidden;
}

.wkJobCard__img {
  display: block;
  height: 21.9rem;
}

.wkJobCard__img img {
  width: 100%;
  height: 100%;
  border-radius: 2rem;
  object-fit: cover;
}

.wkJobCard__body {
  display: flex;
  flex: 1;
  min-height: 0;
  padding: 1.5rem;
}

.wkJobCard__panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 2.5rem 3.6rem;
  background: #fff;
  border-radius: 1.5rem;
}

.wkJobCard__title {
  position: relative;
  padding-left: 1.3rem;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.647;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.wkJobCard__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.3rem;
  height: 1.7rem;
  border-radius: 0.2rem;
  background: var(--color-main);
}

.wkJobCard__text {
  margin-top: 1rem;
  font-size: 1.4rem;
  line-height: 1.857;
  color: #212121;
}

/* 横スクロールのつまみ（--job-len / --job-pos は JS が入れる） */
.wkTime__bar,
.wkJob__bar {
  --job-len: 0.3;
  --job-pos: 0;
  position: relative;
  height: 0.3rem;
  border-radius: 999px;
  background: #d9d5d2;
}

.wkJob__bar {
  margin-top: 3rem;
}

.wkTime__thumb,
.wkJob__thumb {
  display: block;
  width: calc(var(--job-len) * 100%);
  height: 100%;
  margin-left: calc(var(--job-pos) * (100% - var(--job-len) * 100%));
  border-radius: 999px;
  background: var(--color-main);
}

.wkJob .wkNote {
  margin-top: 2rem;
}

/* ===================================
    Tablet（751〜1024px）
=================================== */
@media screen and (max-width: 1024px) {
  .wkHero {
    height: auto;
    padding: calc(var(--header-h) + 4rem) 4rem 6rem;
  }

  .wkHero__img {
    position: relative;
    inset: auto; /* PC 用の top / left / right を打ち消す（relative だと効いてしまう） */
    height: auto;
    aspect-ratio: 898 / 526;
    margin-bottom: 4rem;
  }

  /* 枠の高さは aspect-ratio で決まるため、img の height: 100% は iOS Safari で解決されず
     画像本来の比率の高さで描かれて下が切れる。枠いっぱいに絶対配置して object-fit で収める */
  .wkHero__img img {
    position: absolute;
    inset: 0;
  }

  .wkHero__body {
    position: static;
    width: 100%;
  }

  /* 図は PC 幅でないと成立しないので Tab 以下は出さない */
  /* 4つの円の図は Tab でも出す（以前は下の「5つの約束」で代えていたが、FIN で約束が無くなったため）。
     PC の絶対配置を解いて本文の下に置き、Tab の本文幅に収まる大きさにする */
  .wkChart {
    position: relative;
    left: auto;
    top: auto;
    margin: 4rem auto 0;
    zoom: 0.8;
  }

  /* JOB：タブと前後ボタンが1行に入らない幅では、ボタンを次の行の右端に回す */
  .wkJob__head {
    flex-wrap: wrap;
  }

  .wkJob .wkTabs {
    flex: 0 0 auto;
    max-width: 100%;
  }

  .wkJob__nav {
    margin-left: auto;
  }

  .philosophy {
    border-radius: 4rem;
  }

  .philosophy__inner {
    min-height: 0;
    padding: 8rem 5rem;
  }

  .philosophy__title,
  .philosophy__creed,
  .philosophy__body {
    position: static;
    width: auto;
  }

  .philosophy__creed {
    margin-top: 4rem;
    font-size: 3.6rem;
    line-height: 1.6;
  }

  .philosophy__body {
    margin-top: 3rem;
    line-height: 2.2;
  }

  .wkPromise {
    width: auto;
    margin-top: 6rem;
  }

  .wkPromise__lead {
    width: auto;
    text-align: left;
  }

  .wkPromise__list {
    flex-wrap: wrap;
    gap: 1.6rem;
  }

  .wkPromise__item {
    flex: 1 1 26rem;
  }

  .wkPanel {
    width: auto;
    max-width: none;
    margin-inline: 3rem;
  }

  .wkStyle,
  .wkSchedule {
    padding: 8rem 5rem 0;
  }

  .wkJob {
    padding: 8rem 5rem 8rem;
  }

  .wkStyle__intro {
    flex-direction: column;
    align-items: stretch;
  }

  .wkStyle__img {
    width: 100%;
    height: auto;
    aspect-ratio: 556 / 348;
  }

  .wkTask__list,
  .wkRole__list {
    flex-wrap: wrap;
    gap: 2rem;
  }

  .wkTask,
  .wkRole {
    flex: 1 1 24rem;
  }

  /* 白パネルの左右パディングが 5rem になるので、カード列のはみ出しも合わせる */
  .wkJob__list {
    margin-inline: -5rem;
    padding-inline: 5rem;
  }

  /* チャートは実寸 1024px。Tab 幅では収まらないので横スクロール＋つまみを出す */
  .wkTime__bar {
    display: block;
    margin-top: 2.4rem;
  }

  /* 横スクロールするので、左に貼り付く列は灰色の下地を持たせて下を隠す */
  .wkTime__unit,
  .wkTime__case,
  .wkTime__case::before {
    background: var(--color-gray);
  }
}

/* ===================================
    SP（〜750px）Figma 3313-22671
    PHILOSOPHY は写真を敷かず、白パネルの一部として見せる
=================================== */
@media screen and (max-width: 750px) {
  /* ---- ヒーロー（テキストが先、画像が後） ---- */
  .wkHero {
    display: flex;
    flex-direction: column;
    padding: calc(var(--header-h) + 2.8rem) 0 0;
  }

  .wkHero__body {
    order: 1;
    padding: 0 2rem;
  }

  .wkHero__img {
    order: 2;
    margin: 3.2rem 0 0 2rem;
    aspect-ratio: 370 / 198;
    border-radius: 2rem 0 0 2rem;
  }

  .wkHero__en {
    font-size: 5.2rem;
    margin-bottom: -0.4rem;
  }

  .wkHero__ja {
    font-size: 1.4rem;
  }

  .wkHero__lead {
    margin-top: 3rem;
    font-size: 1.3rem;
    line-height: 1.846;
  }

  /* ---- PHILOSOPHY（Figma 3770-60025：写真の上に白文字。図も出す） ---- */
  /* Figma 3770-60025 は画面幅いっぱい（390px）で角丸 30px */
  .philosophy {
    margin: 4.8rem 0 0;
    background-position: 62% center;
    border-radius: 3rem;
  }

  .philosophy::before {
    background: rgba(15, 10, 10, 0.58);
  }

  /* 下は円の図の輪が枠から 2.9rem はみ出すぶんを足して、輪の下に Figma の 56px を残す */
  .philosophy__inner {
    padding: 5.6rem 2.4rem 8.6rem;
  }

  .philosophy__title .sec-title__en {
    font-size: 4rem;
    line-height: 1.5;
  }

  .philosophy__title .sec-title__ja {
    font-size: 1.4rem;
    line-height: 1.5;
  }

  .philosophy__creed {
    margin-top: 2.8rem;
    font-size: 2.5rem;
    line-height: 1.68;
    letter-spacing: -0.02em;
  }

  .philosophy__body {
    margin-top: 2.4rem;
    font-size: 1.4rem;
    line-height: 2.143;
    letter-spacing: 0.01em;
  }

  /* PC の改行位置は SP だと半端に折り返すので、自然に流す */
  .philosophy__body br {
    display: none;
  }

  /* 段落の最後の行に「い。」だけが落ちないようにする */
  .philosophy__body p {
    text-wrap: pretty;
  }

  /* 図は PC の寸法（701px 幅）をそのまま 342px に縮める */
  .wkChart {
    display: block;
    position: relative;
    left: auto;
    top: auto;
    margin: 3.6rem auto 0;
    zoom: 0.4877; /* パネルの内側（342px）に収める */
  }

  /* 5つの約束は Figma SP に無いが、内容を落とさないよう写真の上にそのまま続ける */
  .wkPromise {
    margin-top: 4rem;
  }

  .wkPromise__lead {
    font-size: 1.3rem;
    line-height: 1.846;
  }

  .wkPromise__card {
    margin-top: 2.4rem;
  }

  .wkPromise__list {
    flex-direction: column;
    gap: 1.2rem;
    margin-top: 0;
  }

  .wkPromise__item {
    flex: none;
    padding: 2rem 1.6rem;
    border-radius: 1.2rem;
  }

  .wkPromise__no {
    font-size: 2.2rem;
  }

  .wkPromise__text {
    margin-top: 0.8rem;
    font-size: 1.3rem;
    line-height: 1.692;
  }

  /* ---- 白パネル ---- */
  /* Figma 3770-60054：白パネルは左右 10px 内側・角丸 20px、中身はさらに 20px 内側 */
  .wkPanel {
    margin: 2rem 1rem 0;
    border-radius: 2rem;
  }

  .wkStyle,
  .wkSchedule {
    padding: 7.2rem 2rem 0;
  }

  /* Figma では S02 の末尾に 38px の余白がある（役割の囲み → SCHEDULE 見出しまで 110px） */
  .wkStyle {
    padding-bottom: 3.8rem;
  }

  .wkJob {
    padding: 7.2rem 2rem 7.2rem;
  }

  /* 見出し（Figma：英字 40px / 行高 normal、和文 14px、間 2px） */
  .wkPanel .sec-title__en {
    font-size: 4rem;
    line-height: 1.5;
    margin-bottom: 0.2rem;
  }

  .wkPanel .sec-title__ja {
    font-size: 1.4rem;
    line-height: 1.43;
  }

  .wkNote {
    margin-top: 2rem;
    font-size: 1.2rem;
    line-height: 1.667;
  }

  .wkPanelNote {
    font-size: 1.1rem;
  }

  /* ---- S02 ---- */
  .wkStyle__intro {
    gap: 2.4rem;
    margin-top: 2.8rem;
  }

  .wkStyle__img {
    border-radius: 1.6rem;
  }

  .wkStyle__catch {
    font-size: 2rem;
    line-height: 1.6;
  }

  .wkStyle__desc {
    margin-top: 1.4rem;
    font-size: 1.4rem;
    line-height: 1.714;
  }

  /* Figma 3770-60070（パネル）：上 25 / 下 24 / 左右 20、見出しとカードの間 20 */
  .wkBox {
    margin-top: 3.2rem;
    padding: 2.5rem 2rem 2.4rem;
  }

  .wkBox + .wkBox {
    margin-top: 2rem;
  }

  .wkBox__title {
    padding-left: 0;
    font-size: 1.8rem;
    line-height: 1.556;
  }

  .wkBox__title::before {
    width: 0.3rem;
    height: 2rem;
    margin-right: 1rem;
  }

  /* カード：写真（高さ 170・上だけ角丸）の下端 14px に白い本文が重なる */
  .wkTask__list {
    flex-direction: column;
    gap: 1.9rem;
    margin-top: 2rem;
  }

  .wkTask {
    flex: none;
  }

  .wkTask__img {
    height: 17rem;
    margin-bottom: -1.4rem;
    border-radius: 1.6rem 1.6rem 0 0;
  }

  .wkTask__body {
    gap: 1rem;
    padding: 1.8rem;
    border-radius: 1.6rem;
  }

  .wkTask__title {
    font-size: 1.6rem;
    line-height: 1.5;
  }

  .wkTask__text {
    font-size: 1.4rem;
    line-height: 1.714;
  }

  /* 店舗での役割は SP だけアコーディオン */
  .wkBox__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    pointer-events: auto;
    cursor: pointer;
  }

  .wkBox__icon {
    position: relative;
    display: block;
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
  }

  .wkBox__icon::before,
  .wkBox__icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.8rem;
    height: 0.2rem;
    background: var(--color-main);
    transform: translate(-50%, -50%);
  }

  .wkBox__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform 0.3s ease;
  }

  .JsSpAc.is-open .wkBox__icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  .wkBox__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease;
  }

  .JsSpAc.is-open .wkBox__body {
    grid-template-rows: 1fr;
  }

  .wkBox__inner {
    min-height: 0;
    overflow: hidden;
  }

  /* 役割カード（Figma 3770-60100）：間 15、内側 20、バッジは幅 172・高さ 32 */
  .wkRole__list {
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
  }

  .wkRole {
    flex: none;
    padding: 2rem;
  }

  .wkRole__label {
    width: 17.2rem;
    height: 3.2rem;
  }

  .wkRole__text {
    align-self: stretch;
    margin-top: 1.2rem;
    font-size: 1.4rem;
    line-height: 1.857;
  }

  /* ---- タブ ---- */
  .wkTabs {
    gap: 0.8rem;
    margin-top: 2rem;
    margin-right: -2rem;
    padding-right: 2rem;
  }

  /* Figma の高さ 44px は枠線（内側 2px）込み */
  .wkTab {
    width: auto;
    padding: 0.8rem 1.6rem;
  }

  /* SCHEDULE のタブだけ SP でも 3つとも同じ幅 */
  .wkSchedule .wkTab {
    width: 10rem;
    padding-inline: 0;
  }

  .wkJob .wkTab {
    width: auto;
    padding-inline: 1.6rem;
  }

  .wkPanelBox {
    margin-top: 2.4rem;
  }

  .wkSchedule .wkPanelBox {
    margin-top: 4.4rem;
  }

  .wkJob .wkPanelBox {
    margin-top: 2rem;
  }

  /* ---- S03（チャートは 1066px 実寸。CASE 列を残して横スクロール） ---- */
  .wkTime {
    --axis-x: 15rem;
    --case-x: 2rem;
    --case-w: 7.6rem;
    --case-col-w: 10.4rem;
    --unit-w: 6.6rem;
    --row-h: 3.6rem;
    --row-gap: 5rem;
    --rows-top: 2.8rem;
    --rows-bottom: 1.2rem;
    --grid-h: 24.8rem;
    --edge-y: -2rem;
    --task-inset: 0rem;
    --chart-w: 109.6rem;
  }

  .wkTime__title {
    font-size: 2rem;
    line-height: 1.6;
  }

  /* パネルは画面の右端まで抜く */
  .wkTime__panel {
    margin-top: 1.6rem;
    margin-right: -2rem;
    padding: 2rem 0;
    border-radius: 2rem 0 0 2rem;
  }

  /* パネルごと右端まで抜いているので、PC のはみ出し調整は戻す */
  .wkTime__scroll {
    margin-right: 0;
  }

  .wkTime__unit {
    font-size: 1.1rem;
  }

  .wkTime__hour {
    font-size: 1.2rem;
    line-height: 1.5;
  }

  .wkTime__flag {
    font-size: 1.2rem;
  }

  .wkTime__pill {
    font-size: 1.3rem;
    line-height: 1.538;
  }

  .wkTime__edge {
    font-size: 1.2rem;
    line-height: 1.333;
  }

  .wkTime__task {
    padding-inline: 0.4rem;
    border-radius: 1rem;
    font-size: 1.3rem;
    line-height: 1.538;
  }

  .wkTime__task--close {
    font-size: 1.3rem;
  }

  /* SP は幅に収まるので 1行のまま */
  .wkTime__task--manage {
    white-space: nowrap;
  }

  .wkTime__bar {
    display: block;
    margin-top: 1.4rem;
  }

  /* ---- S04（カードのスライダー） ---- */
  .wkJob__head {
    margin-top: 2.4rem;
  }

  /* 矢印は PC / Tab のみ。SP はスワイプで送る */
  .wkJob__nav {
    display: none;
  }

  .wkJob__list {
    margin-inline: -2rem;
    padding-inline: 2rem;
  }

  .wkJobCard {
    width: 25rem;
    border-radius: 2rem;
  }

  .wkJobCard__img {
    height: 15.2rem;
  }

  .wkJobCard__img img {
    border-radius: 2rem;
  }

  .wkJobCard__panel {
    padding: 2rem 1.6rem;
  }

  .wkJobCard__title {
    padding-left: 1.1rem;
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: 0;
  }

  .wkJobCard__title::before {
    top: 0.35rem;
  }

  .wkJobCard__text {
    margin-top: 1.2rem;
    font-size: 1.4rem;
    line-height: 1.714;
  }

  .wkJob__bar {
    margin-top: 2rem;
  }

  .wkJob .wkNote {
    margin-top: 2rem;
  }
}