@charset "UTF-8";

/* ========================================
   job.css
   職種紹介（job1〜job3 共通）スタイル
   Figma: 54:17637(営業) / 54:27556(整備士) / 54:18498(事務) / 54:35502(営業SP)
   設計幅: PC 1920px / SP 640px
   ・テーマは職種ブロック(.job-role--*)の CSS 変数で切替
     営業=赤 / 整備士=青 / 事務(テクニカルアドバイザー)=緑
   ・PC: clamp(最小, vw(=px/19.2), Figma実寸)。768px 以上は各 inner に zoom 0.81
   ・767px 以下: 640px 設計を vw(=px/6.4) + max() の px 床でスケール
     ★2026-07-30 切替点を 1024px→767px に変更(案B採用・森さん依頼「スマホデザインへの
       切替をもっと遅くする」)。他ページ(company等)のSP切替と統一。タブレット帯
       (768〜1024px)はPCデザインの縮小表示になる(1日の流れはcqwでコンテナ追従)
   ・「1日の流れ」の枠は 白カード + box-shadow 2重リング(テーマ色帯+黒)で表現
   ・ピンク帯上端の波形エッジは楕円 border-radius で近似
======================================== */

.job {
  --job-ink: #212121;
  --job-ink-warm: #2c2c2c;
  --job-yellow: #ffcd53;
  --job-case-bg: #888383;      /* キャリアのケース枠（Figma実測グレー） */
  --job-case-no: #f88;

  background-color: #fffdf4;
  overflow-x: clip;            /* 波形エッジ(横100%超)のはみ出し対策 */
}
/* 職種テーマ（ページ全体 = ヒーロー用） */
.job--sales  { --job-theme: #f75959; --job-label: #fcc7c7; }
.job--tech   { --job-theme: #55baf5; --job-label: #c8e2f2; }
.job--office { --job-theme: #47d684; --job-label: #b6f5d1; }
/* 職種ブロックテーマ（1日の流れ・仕事内容） */
.job-role--sales  { --job-theme: #f75959; --job-label2: #fcc7c7; --job-band: #fad8d8; }
.job-role--tech   { --job-theme: #55baf5; --job-label2: #c8e2f2; --job-band: #e4f1f8; }
.job-role--green  { --job-theme: #47d684; --job-label2: #b6f5d1; --job-band: #cbf5dd; --job-band-light: #eafaf0; }
.job-role--yellow { --job-theme: #ffcd53; --job-label2: #fff3d5; --job-band: #ffe7ac; --job-band-light: #fff4d9; }

/* ============================================================
   Hero（左=形状写真 / 右=テーマ色帯＋#JOBラベル＋タイトル）＋道路
============================================================ */
.job-hero {
  position: relative;
  height: clamp(180px, 23.96vw, 460px);          /* Figma 460px */
}
.job-hero-band {
  position: absolute;
  inset: 0 0 0 40%;                              /* Figma: x768〜 */
  background-color: var(--job-theme);
}
.job-hero-photo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  margin: 0;
  width: 45.73vw;                                /* Figma 878px */
  height: 100%;
  line-height: 0;
}
.job-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}
/* 写真未支給(事務職): グレーの形状プレースホルダ（右上が斜めに欠ける） */
.job-hero-photo--empty {
  background-color: #a8a8a8;
  clip-path: polygon(0 0, 86% 0, 100% 100%, 0 100%);
}
.job-hero-body {
  position: absolute;
  left: 48.03%;                                  /* Figma x922 */
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding-right: 24px;
  box-sizing: border-box;
}
.job-hero-label {
  display: flex;
  gap: clamp(60px, 8vw, 154px);
  margin: 0 0 clamp(6px, 0.63vw, 12px);
  color: var(--job-label);
  font-size: clamp(1.6rem, 2.6vw, 5rem);         /* Figma 50px */
  letter-spacing: 0.025em;
  line-height: 1.2;
}
/* ★2026-07-29 「#JOB 01 営業職」ラベルを Dela Gothic One に（HTMLで f-dela を付与）。
   旧 font-family: var(--font-family-en)(Roboto) がクラスを上書きしていたため解除。
   ※ job-body.php 共通なので #JOB 01〜03 の各ラベルに適用される */
.job-hero-title {
  margin: 0;
  line-height: 0;
}
.job-hero-title img {
  width: clamp(320px, 50.5vw, 970px);            /* タイトルロゴ画像 */
  max-width: 100%;
  height: auto;
}
/* タイトル画像未支給(事務職): CSS テキスト近似（learning と同方式） */
.job-hero-title--txt {
  line-height: 1.35;
}
.job-hero-title-txt {
  position: relative;
  z-index: 0;
  display: block;
  width: fit-content;
  color: var(--job-ink);
  font-size: clamp(2.4rem, 4.06vw, 7.8rem);      /* Figma 78px */
  letter-spacing: 0.05em;
  white-space: nowrap;
  -webkit-text-stroke: 0.055em #fff;
  paint-order: stroke fill;
}
.job-hero-title-txt::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-text-stroke: 0.13em var(--job-ink);
}
/* 道路（about / learning と同手法） */
.job-hero-road {
  position: relative;
  height: clamp(22px, 2.084vw, 40px);
  background-color: #595959;
}
.job-hero-road::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: clamp(2px, 0.21vw, 4px);
  background-image: repeating-linear-gradient(
    to right,
    #fff 0,
    #fff 30px,
    transparent 30px,
    transparent 60px
  );
  transform: translateY(-50%);
}

/* ============================================================
   職種概要カード（事務職のみ）
============================================================ */
.job-overview {
  margin-top: clamp(30px, 3.9vw, 75px);
}
.job-overview-inner {
  width: min(1606px, calc(100% - 48px));
  margin: 0 auto;
}
.job-overview-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  gap: clamp(16px, 2.34vw, 45px);
  max-width: 1245px;                             /* Figma: 600+45+600 */
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.job-overview-card {
  position: relative;
  background-color: #fff;
  border: clamp(2px, 0.16vw, 3px) solid var(--job-ink);
  border-radius: clamp(12px, 1.04vw, 20px);
  padding-bottom: clamp(40px, 3vw, 58px);
  overflow: hidden;
}
.job-overview-card--green  { --job-ov: #47d684; }
.job-overview-card--yellow { --job-ov: #ffcd53; }
.job-overview-card-title {
  margin: 0;
  padding: clamp(10px, 1.2vw, 23px) clamp(16px, 2.4vw, 47px);
  background-color: var(--job-ov);
  border-bottom: clamp(2px, 0.16vw, 3px) solid var(--job-ink);
  text-align: center;
}
.job-overview-card-title span {
  position: relative;
  z-index: 0;
  color: #fff;
  font-size: clamp(1.8rem, 2.34vw, 4.5rem);      /* Figma 45px */
  letter-spacing: 0.05em;
  line-height: 1.3;
  white-space: nowrap;
  -webkit-text-stroke: 0.05em #fff;
  paint-order: stroke fill;
}
.job-overview-card-title span::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-text-stroke: 0.14em var(--job-ink);
}
.job-overview-card-body {
  margin: clamp(12px, 1.2vw, 23px) auto 0;
  width: min(540px, calc(100% - 40px));
  color: var(--job-ink-warm);
  font-size: clamp(1.4rem, 1.303vw, 2.5rem);     /* Figma 25px / 本文下限14px */
  line-height: 2;
}
.job-overview-card-more {
  position: absolute;
  right: clamp(14px, 1.4vw, 27px);
  bottom: clamp(10px, 1vw, 19px);
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 0.52vw, 10px);
  color: var(--job-ink);
  font-size: clamp(1.2rem, 1.04vw, 2rem);        /* Figma 20px */
  letter-spacing: 0.05em;
  text-decoration: none;
}
.job-overview-card-more:hover {
  opacity: 0.75;
}
.job-overview-card-arrow {
  display: inline-block;
  width: clamp(38px, 3.17vw, 61px);
  height: clamp(16px, 1.27vw, 24.4px);
  background-color: var(--job-ink);
  border-radius: 200px;
  position: relative;
}
.job-overview-card-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48%;
  height: clamp(6px, 0.51vw, 9.8px);
  transform: translate(-50%, -50%);
  background-color: #fff;
  clip-path: polygon(0 35%, 70% 35%, 70% 0, 100% 50%, 70% 100%, 70% 65%, 0 65%);
}

/* ============================================================
   職種ブロック共通
============================================================ */
.job-role {
  position: relative;
  margin-top: clamp(30px, 3.9vw, 75px);
  scroll-margin-top: calc(var(--header-h-now, 72px) + 12px);
}
/* 職種タイトル帯（事務職のみ）: 白箱 + #番号 + 職種名 */
.job-role-heading {
  text-align: center;
}
.job-ribbon {
  display: inline-flex;
  align-items: center;
  gap: clamp(16px, 2vw, 40px);
  margin: 0;
  padding: clamp(10px, 1.15vw, 22px) clamp(24px, 2.9vw, 56px);
  background-color: #fff;
  border: 2px solid var(--job-ink);
  border-radius: clamp(14px, 1.4vw, 27px);
}
.job-ribbon-no {
  /* ★2026-07-28 視認性改善: 旧 var(--job-label2)(薄緑/薄黄)は白地でほぼ見えないため
     テーマ実色+薄い縁取りに変更。※薄い番号がデザイン意図の場合は森さんご指摘ください */
  color: var(--job-theme);
  -webkit-text-stroke: 0.018em rgba(33, 33, 33, 0.4);
  paint-order: stroke fill;
  font-family: var(--font-family-en);
  font-size: clamp(1.8rem, 2.6vw, 5rem);         /* Figma 50px */
  letter-spacing: 0.025em;
  line-height: 1;
}
.job-ribbon-tx {
  color: var(--job-ink);
  font-size: clamp(2rem, 3.39vw, 6.5rem);        /* Figma 65px */
  letter-spacing: 0.05em;
  line-height: 1.2;
}

/* ============================================================
   1日の流れ
============================================================ */
.job-daily {
  margin-top: clamp(24px, 2.9vw, 55px);
}
.job-daily-inner {
  /* ★2026-07-29 「1日の流れ」の枠を少し狭める（案A）。旧 1763px → 1500px。
     1500px未満の画面は従来どおり calc(100% - 48px) が優先 */
  width: min(1500px, calc(100% - 48px));
  margin: 0 auto;
  /* ★2026-07-29 「余白優先で縮める」化(know方式): 中身のサイズ基準を画面幅(vw)から
     このコンテナ幅(cqw)へ変更。上限1500pxに張り付く間(画面≥1548px)はcqwが一定=最大
     サイズを保持し、余白だけが縮む。1548px未満でコンテナごと比例縮小。
     以降の cqw 係数 = 最大値px ÷ 15（=最大値/1500×100。コンテナ1500pxで最大） */
  container-type: inline-size;
}
/* 上の白ピル（〜って毎日どんなことしているの?） */
.job-daily-pill {
  position: relative;
  z-index: 2;
  width: fit-content;
  max-width: calc(100% - 48px);
  margin: 0 auto calc(-1 * clamp(16px, 2.067cqw, 31px));
  padding: clamp(4px, 0.667cqw, 10px) clamp(20px, 3.867cqw, 58px);
  background-color: #fff;
  border: clamp(2px, 0.28cqw, 4px) solid var(--job-ink);  /* ★2026-07-31 枠を太く(森さん): 旧1pxは他要素比で細くインパクト不足 */
  border-radius: 100px;
  color: var(--job-ink-warm);
  font-size: clamp(1.3rem, 2cqw, 3rem);          /* Figma 30px */
  line-height: 1.6;
  text-align: center;
}
/* 枠: 白カード + テーマ色リング + 黒リング（Figma: 色plate1763 + 白inner1731） */
.job-daily-frame {
  position: relative;
  margin: 0 clamp(12px, 1.2cqw, 18px);
  padding: clamp(40px, 4.4cqw, 66px) clamp(16px, 4.133cqw, 62px) clamp(24px, 3.333cqw, 50px);
  background-color: #fff;
  border: 2px solid var(--job-ink);
  border-radius: clamp(20px, 2.133cqw, 32px);
  box-shadow:
    0 0 0 clamp(8px, 1.067cqw, 16px) var(--job-theme),
    0 0 0 calc(clamp(8px, 1.067cqw, 16px) + 2px) var(--job-ink);
}
/* “1日の流れ”を紹介します! */
.job-daily-title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(4px, 0.933cqw, 14px);
  margin: 0 0 clamp(24px, 3.333cqw, 50px);
  line-height: 1.15;
}
.job-daily-title-quote {
  color: var(--job-yellow);
  font-size: clamp(2.8rem, 5.333cqw, 8rem);      /* Figma 80px */
}
.job-daily-title-main {
  position: relative;
  color: var(--job-theme);
  font-size: clamp(2.8rem, 5.333cqw, 8rem);
  letter-spacing: 0.05em;
}
.job-daily-title-main::after {                   /* 黄下線 */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * clamp(4px, 0.667cqw, 10px));
  height: clamp(5px, 0.667cqw, 10px);
  background-color: var(--job-yellow);
  border-radius: 10px;
}
.job-daily-title-sub {
  color: var(--job-ink);
  font-size: clamp(1.8rem, 3.333cqw, 5rem);      /* Figma 50px */
  letter-spacing: 0.05em;
}
.job-daily-title-bang {
  color: var(--job-ink);
  /* ★2026-08-07 B-1(記号の全角統一)の見た目補正。全角！は左右に空きを持つため
     「を紹介します　！」と離れて見える。表記は全角のまま字間だけ詰め戻す */
  margin-inline: -0.26em;
  font-size: clamp(1.8rem, 3.333cqw, 5rem);
  transform: rotate(15deg);
}
/* タイムライン（中央線 + 左右2カラム互い違い） */
.job-daily-list {
  position: relative;
  display: flow-root;                            /* ★2026-07-28 float項目を内包 */
  overflow: hidden;                              /* ★2026-07-28 案A: 線分の上方向はみ出しを最初のドット手前で切る */
  margin: 0;
  padding: 0;
  list-style: none;
  /* ★2026-07-24 Figma(54-18113/54-17944)準拠のセンターライン用。
     項目の内側の端から中央線までの距離（= 各項目の 50% からの引き量）。
     ドットのオフセットと項目幅で共有する。SPでは同ブロック内で上書き */
  --job-daily-gap: clamp(10px, 1.733cqw, 26px);
  --job-daily-dot: clamp(12px, 1.333cqw, 20px);  /* Figma 赤丸 直径20px */
  /* ★2026-08-01 線の太さを変数化: 従来は複数ルールに直書きで、1箇所だけ変えると
     線・ドット・白カバーの整合が崩れた。線幅/ドット径/線位置/字下げは全てこの変数群を
     参照するため、値を調整しても中心合わせは自動で保たれる(SPは同ブロック内で上書き) */
  --job-daily-line-w: clamp(4px, 0.533cqw, 8px); /* Figma 8px */
}
/* ★2026-07-31 写真の黒枠線の左右両端切れを修正(森さん指摘):
   外側カラムの写真は箱の外端が .job-daily-list の端に一致し、縁(box-shadow=箱の外側2px)が
   上の overflow:hidden に左右だけ切られていた。左右に4pxの逃がし(padding)を作り、
   negative margin で中身の見た目の位置は不変に。線分の上方向カット(overflow:hidden)は維持。
   SP(≤640px・1カラム)は写真が端に接しないため対象外 */
@media (min-width: 641px) {
  .job-daily-list {
    padding: 0 4px;
    margin: 0 -4px;
  }
}
/* ★2026-07-28 案A: PCの中央線は「各ドットから上方向の線分の集合」で描く（下記
   .job-daily-item-main::before）。これで最後のドット(18:00)の下に線が残らず、
   列の高さ・テキスト量に依存せず常に最初〜最後のドットで終端する（Figma一致）。
   この全体線(::before)はPCでは非表示。SP(≤767px)では左の縦線として再有効化する */
.job-daily-list::before {                        /* SP用の左縦線（PCは display:none） */
  content: "";
  display: none;
  position: absolute;
  top: clamp(28px, 3.867cqw, 58px);
  bottom: clamp(24px, 3.2cqw, 48px);
  left: 50%;
  width: var(--job-daily-line-w);
  transform: translateX(-50%);
  background-color: var(--job-theme);
  border-radius: 999px;
}
/* PC: 各ドットから上へ伸びる線分（隣のドットまで重なり、連続した線になる）。
   下端＝自分のドット(時計中心)、そこから上へ十分な高さ。最後のドットの下には無い。
   上に伸びた分は .job-daily-list の overflow:hidden で最初のドット手前で切る */
.job-daily-item-main::before {
  content: "";
  position: absolute;
  bottom: calc(100% - clamp(44px, 6.4cqw, 96px) / 2);  /* 下端＝ドット(時計中心) */
  height: 300vh;                                     /* 上方向へ（隣のドットを越えて重なる） */
  width: var(--job-daily-line-w);                  /* Figma 8px */
  background-color: var(--job-theme);
  z-index: 0;                                        /* ドット(::after z1)より背面 */
}
.job-daily-item--left .job-daily-item-main::before {
  left: calc(100% + var(--job-daily-gap));
  transform: translateX(-50%);
}
.job-daily-item--right .job-daily-item-main::before {
  right: calc(100% + var(--job-daily-gap));
  transform: translateX(50%);
}
/* ★2026-07-28 案A補足: 最初のドット(9:00)の上に伸びる線分を隠し、線を9:00ドットで始める。
   線分は各ドットから上へ伸びるため放置すると最上部(9:00)の上にも線が残る。
   中央線上・9:00ドットの真上だけを frame の白で覆う（9:00の時計は左寄りで、
   中央線上のこの領域は空なので他要素に影響しない）。SPでは無効化（下記メディアクエリ） */
.job-daily-list::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--job-daily-line-w) + 6px);
  height: calc(clamp(44px, 6.4cqw, 96px) / 2 - var(--job-daily-dot) / 2);  /* 上端〜9:00ドットの上端 */
  background-color: #fff;                          /* .job-daily-frame の地色 */
  z-index: 1;                                       /* 線分(z0)を隠す。ドット(z1)とは非重複 */
}
.job-daily-item {
  display: grid;
  /* ★2026-07-28 Figma(54-18113)準拠: 写真は時計の真横ではなく「時計と時計の隙間」に。
     テキスト(時計＋見出し＋本文)は上端、写真は横並びのまま下方向へずらして隙間へ落とす
     （写真の margin-top は下記 .job-daily-photo）。align-items:start でテキストを上に固定 */
  align-items: start;
  column-gap: clamp(12px, 3.733cqw, 56px);
  width: calc(50% - var(--job-daily-gap));
  /* ★2026-07-28 Figma(54-18113)準拠の2カラム互い違い化:
     旧「1本のリストに交互配置＋margin-topで順次縦積み」は左右がペアで詰まらず
     間延びしていた。floatで左右を独立カラムにし、DOM順(時系列)を保ったまま
     各カラムが独立して積み上がる（masonry風）。項目幅の式(50%-gap)は不変なので
     写真22.7%・ドットの中央線位置もそのまま活きる */
  /* ★2026-07-28 同カラム内の写真間の縦余白。
     旧 clamp(18px,2vw,40px)(≒29px) はFigma(130px=写真高さの約46%)より詰まっていた。
     Figma基準の 130px 相当に拡大（1920時130px・コンテンツ幅8.1%相当） */
  margin-bottom: clamp(50px, 8.667cqw, 130px);   /* Figma基準の写真間余白 */
}
/* ★2026-07-24 センターライン上の赤ドット。各項目の時計の真横（中央線上）に置く。
   .job-daily-item-main（時計＋見出し＋本文の塊）が中央線に接する側のセルなので、
   その端から --job-daily-gap ぶん外へ出した位置が中央線。
   縦は main の先頭（時計）の中心＝時計高さの半分。align-items:center の影響を受けず
   時計に追従する（main 基準のため） */
.job-daily-item-main {
  position: relative;
}
.job-daily-item-main::after {
  content: "";
  position: absolute;
  top: calc(clamp(44px, 6.4cqw, 96px) / 2);      /* 時計（watch）の縦中心 */
  width: var(--job-daily-dot);
  height: var(--job-daily-dot);
  border-radius: 50%;
  background-color: var(--job-theme);
  z-index: 1;
}
.job-daily-item--left .job-daily-item-main::after {
  left: calc(100% + var(--job-daily-gap));       /* main 右端＝項目内端。そこから中央線へ */
  transform: translate(-50%, -50%);
}
.job-daily-item--right .job-daily-item-main::after {
  right: calc(100% + var(--job-daily-gap));       /* main 左端＝項目内端。そこから中央線へ */
  transform: translate(50%, -50%);
}
/* ★2026-07-28 Figma(54-18113)準拠: 写真は本文帯(コンテンツ)の22.7%(=365/1606)。
   旧 clamp(140px,19vw,365px) は viewport 基準の vw でコンテンツ幅の比率を追えず
   約17%に縮んでいた。アイテム幅の%(コンテンツ追従)＋365px上限に変更。
   ※係数はアイテム基準。項目=50%-gap なので 46.8% で概ねコンテンツの22.7% */
.job-daily-item--left {
  grid-template-columns: min(46.8%, 365px) minmax(0, 1fr);
  float: left;                                   /* 左カラム */
  clear: left;                                   /* 直前の左項目の下へ（右項目とは独立） */
}
.job-daily-item--left .job-daily-item-main { grid-column: 2; grid-row: 1; }
.job-daily-item--left .job-daily-photo     { grid-column: 1; grid-row: 1; }
.job-daily-item--right {
  grid-template-columns: minmax(0, 1fr) min(46.8%, 365px);
  float: right;                                  /* 右カラム */
  clear: right;                                  /* 直前の右項目の下へ */
}
.job-daily-item--right .job-daily-item-main { grid-column: 1; grid-row: 1; }
.job-daily-item--right .job-daily-photo     { grid-column: 2; grid-row: 1; }
/* 右カラムを下へオフセットして左右を互い違いに（Figma: 右列が約182px下から開始）。
   nth-child(2)=最初の右項目（DOM: 左,右,左,右… の2番目）。値は実測で較正 */
.job-daily-list .job-daily-item--right:nth-child(2) {
  margin-top: clamp(55px, 8cqw, 120px);
}
.job-daily-time {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2cqw, 18px);
  margin: 0;
}
.job-daily-watch {
  width: clamp(44px, 6.4cqw, 96px);              /* Figma 96px */
  height: auto;
}
.job-daily-time-tx {
  color: var(--job-theme);
  font-size: clamp(2rem, 3.333cqw, 5rem);        /* Figma 50px */
  line-height: 1.1;
}
.job-daily-item-title {
  margin: clamp(2px, 0.4cqw, 6px) 0 0;
  color: var(--job-ink-warm);
  font-size: clamp(1.5rem, 2.333cqw, 3.5rem);    /* Figma 35px */
  letter-spacing: 0.02em;
  line-height: 1.35;
}
.job-daily-item-body {
  margin: clamp(4px, 0.667cqw, 10px) 0 0;
  color: var(--job-ink-warm);
  font-size: clamp(1.4rem, 1.667cqw, 2.5rem);    /* Figma 25px / 本文下限14px */
  line-height: 1.45;
}
.job-daily-photo {
  margin: 0;
  line-height: 0;
  /* ★2026-07-28 写真を時計の横位置から下へずらし、時計と時計の隙間に寄せる
     （Figmaの写真は時計より下にドリフトして隙間に入る）。値は実測で較正 */
  margin-top: clamp(60px, 7.667cqw, 115px);
}
.job-daily-photo img {
  width: 100%;
  aspect-ratio: 365 / 280;
  object-fit: cover;
  border-radius: 9.86% / 12.86%;   /* 画像の焼込み角丸72px(730x560)に一致 */
  box-shadow: 0 0 0 2px var(--job-ink);   /* ★2026-07-30 縁はbox-shadowで角丸に完全追従。box-sizingのborder幅ズレを解消(全幅/狭幅とも一致) */
}
.job-daily-photo--empty {
  aspect-ratio: 365 / 280;
  background-color: #a8a8a8;
  border-radius: 9.86% / 12.86%;
  box-shadow: 0 0 0 2px var(--job-ink);
}

/* ============================================================
   仕事内容・仕事の流れ
============================================================ */
.job-flow {
  margin-top: clamp(24px, 2.6vw, 50px);
}
/* セクション間の縦ドット飾り */
.job-flow-dots {
  display: block;
  width: clamp(5px, 0.36vw, 7px);
  height: clamp(35px, 3.2vw, 61px);
  margin: 0 auto clamp(20px, 2.4vw, 46px);
  background-image: radial-gradient(circle, var(--job-ink) 40%, transparent 45%);
  background-size: 100% clamp(12px, 1.06vw, 20px);
  background-repeat: repeat-y;
}
/* テーマ淡色帯（上端は楕円アーチで波形エッジを近似） */
.job-flow-band {
  position: relative;
  padding-bottom: clamp(30px, 3.4vw, 66px);
}
.job-flow-band::before {
  content: "";
  position: absolute;
  top: clamp(30px, 2.9vw, 56px);                 /* 見出しが帯上端に跨る分 */
  bottom: 0;
  left: -12%;
  right: -12%;
  z-index: 0;
  background-color: var(--job-band);
  border-radius: 50% 50% 0 0 / clamp(50px, 7vw, 135px);
}
.job-flow-inner {
  position: relative;
  z-index: 1;
  width: min(1606px, calc(100% - 48px));
  margin: 0 auto;
  container-type: inline-size;   /* ★2026-07-31 案B(森さん): 中身をcqwでコンテナ連動=中間帯で最大サイズを保持→比例縮小(1日の流れと統一)。cqw係数=vw×1920/1606 */
}
.job-flow-heading {
  margin: 0;
  text-align: center;
}
/* ★2026-07-29 knowの「こんな瞬間が好き!」形式に統一（案A）:
   白箱＋黒枠＋赤い縁取り文字。旧は黒枠・文字縁取りなし・角丸大きめだった */
.job-flow-heading-tx {
  position: relative;
  z-index: 2;                                    /* 下のピルより前面（重なり順） */
  display: inline-block;
  /* ★2026-08-19 案A（跡田さん選択）: 見出し枠とピルの間が窮屈だったため、枠を縦に。
     ただし「上の余白は広げない」指示 → 上・左右は現状のまま、下 padding だけ厚くする。
     お手本 know「こんな瞬間が好き!」と同様、文字の下にゆとりを作りピルとの詰まりを解消。*/
  padding: clamp(8px, 1.196cqw, 20px) clamp(16px, 2.033cqw, 33px) calc(clamp(12px, 1.75cqw, 26px) + 0.05em);
  background-color: #fff;
  border: clamp(2px, 0.239cqw, 3px) solid var(--job-ink);  /* know: 黒枠3px */
  border-radius: clamp(8px, 0.837cqw, 12px);        /* know: 角丸10px（旧14〜28px→縮小） */
  color: var(--job-theme);
  font-size: clamp(2.2rem, 4.986cqw, 8rem);        /* Figma 80px */
  letter-spacing: 0.05em;
  line-height: 1.05;
  -webkit-text-stroke: clamp(1px, 0.179cqw, 2.5px) var(--job-ink);  /* 赤文字に黒縁取り */
  paint-order: stroke fill;                      /* 縁を文字の外側に */
}
.job-flow-pill {
  position: relative;
  z-index: 3;                                    /* know同様、黒ピルをタイトル箱より前面に重ねる */
  width: fit-content;
  max-width: 100%;
  /* ★2026-07-31 know(.know-likes-lead)と同じ「細いピル」に統一(森さん)：
     line-height を詰め、上下paddingを薄く、箱下端への重なりを深く、
     詰めた分で上へ寄る文字中心を translateY で見た目だけ下げて中央へ戻す */
  margin: clamp(-26px, -2.05cqw, -16px) auto 0;
  padding: clamp(2px, 0.4cqw, 5px) clamp(18px, 3.109cqw, 50px);
  background-color: var(--job-ink);
  border-radius: 999px;
  color: #fff;
  font-size: clamp(1.2rem, 1.869cqw, 3rem);       /* Figma 30px */
  line-height: 1;
  letter-spacing: 0;
  transform: translateY(clamp(4px, 0.68cqw, 11px));
  text-align: center;
  box-sizing: border-box;
}
.job-flow-lead {
  margin: clamp(12px, 1.674cqw, 27px) 0 0;
  color: var(--job-ink-warm);
  font-size: clamp(1.4rem, 1.558cqw, 2.5rem);     /* Figma 25px / 本文下限14px */
  line-height: 2;
  text-align: center;
}
.job-flow-list {
  margin: clamp(20px, 2.869cqw, 46px) 0 0;
  padding: 0;
  list-style: none;
}
.job-flow-item + .job-flow-item {
  margin-top: clamp(28px, 3.706cqw, 60px);
}
.job-flow-item-title {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.793cqw, 29px);
  margin: 0 0 clamp(12px, 1.554cqw, 25px);
  color: var(--job-ink-warm);
  font-size: clamp(1.9rem, 2.798cqw, 4.5rem);      /* Figma 45px */
  letter-spacing: 0.03em;
  line-height: 1.3;
}
.job-flow-item-no {
  color: var(--job-theme);
  font-size: clamp(2.2rem, 3.425cqw, 5.5rem);     /* Figma 55px */
  line-height: 1;
}
.job-flow-item-grid {
  display: grid;
  grid-template-columns: clamp(150px, 22.716cqw, 365px) minmax(0, 1fr);
  column-gap: clamp(14px, 1.554cqw, 25px);
  align-items: start;
}
.job-flow-photo {
  margin: 0;
  line-height: 0;
}
.job-flow-photo img {
  width: 100%;
  aspect-ratio: 365 / 424;
  object-fit: cover;
  border-radius: 9.86% / 8.49%;   /* 画像の焼込み角丸72px(730x848)に一致 */
  box-shadow: 0 0 0 2px var(--job-ink);   /* ★2026-07-30 box-shadowで角丸に完全追従 */
}
.job-flow-photo--empty {
  aspect-ratio: 365 / 424;
  background-color: #a8a8a8;
  border-radius: 9.86% / 8.49%;
  box-shadow: 0 0 0 2px var(--job-ink);
}
/* 事務職(仕事内容が短い)は写真が浅い */
.job-role--green  .job-flow-photo img, .job-role--green  .job-flow-photo--empty,
.job-role--yellow .job-flow-photo img, .job-role--yellow .job-flow-photo--empty {
  aspect-ratio: 365 / 318;
}
.job-flow-sbttl {
  display: inline-block;
  margin: 0;
  padding: clamp(4px, 0.502cqw, 8px) clamp(12px, 1.124cqw, 18px);
  background-color: #fff;
  border: 2px solid var(--job-ink);
  border-radius: clamp(10px, 0.992cqw, 16px);
  color: var(--job-ink-warm);
  font-size: clamp(1.5rem, 2.176cqw, 3.5rem);      /* Figma 35px */
  letter-spacing: 0.02em;
  line-height: 1.45;
}
.job-flow-body {
  margin-top: clamp(8px, 0.873cqw, 14px);
  padding-left: clamp(4px, 0.502cqw, 8px);
  color: var(--job-ink-warm);
  font-size: clamp(1.4rem, 1.558cqw, 2.5rem);     /* Figma 25px / 本文下限14px */
  line-height: 2;
}
.job-flow-body p {
  margin: 0;
}
.job-flow-body p + p {
  margin-top: 0.6em;
}

/* ============================================================
   キャリアステップ（営業のみ）
============================================================ */
.job-career {
  margin-top: clamp(32px, 3.4vw, 66px);
  /* ★2026-07-31 Case02(最終カード)の下＝フッターとの間の余白を広げる(森さん) */
  margin-bottom: clamp(56px, 6.5vw, 130px);
}
.job-career-inner {
  width: min(1763px, calc(100% - 48px));
  margin: 0 auto;
  container-type: inline-size;   /* ★2026-07-31 案B: cqw係数=vw×1920/1763 */
}
.job-career-heading {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(8px, 1.089cqw, 20px);
  width: fit-content;
  margin: 0 auto;
  padding: clamp(6px, 0.653cqw, 12px) clamp(20px, 2.832cqw, 50px);
  background-color: #fff;
  /* ★2026-07-31 Figma(54:18257)準拠(森さん): 白箱に黒枠を追加(仕事内容見出しと同方式)。旧は枠なしだった */
  border: clamp(2px, 0.239cqw, 3px) solid var(--job-ink);
  border-radius: clamp(12px, 1.2cqw, 22px);
  line-height: 1.15;
}
.job-career-heading-quote {
  color: var(--job-yellow);
  font-size: clamp(2.8rem, 4.542cqw, 8rem);
  /* ★2026-07-31 引用符にもキャリアステップ文字と同じ黒縁取りを付ける(森さん) */
  -webkit-text-stroke: clamp(1px, 0.179cqw, 2.5px) var(--job-ink);
  paint-order: stroke fill;
}
.job-career-heading-tx {
  color: var(--job-theme);
  font-size: clamp(2.4rem, 4.542cqw, 8rem);        /* Figma 80px */
  letter-spacing: 0.05em;
  /* ★2026-07-31 Figma準拠: 赤文字に黒縁取り(仕事内容見出しと同方式) */
  -webkit-text-stroke: clamp(1px, 0.179cqw, 2.5px) var(--job-ink);
  paint-order: stroke fill;
}
.job-career-lead {
  margin: clamp(12px, 1.525cqw, 27px) 0 0;
  color: var(--job-ink-warm);
  font-size: clamp(1.4rem, 1.419cqw, 2.5rem);     /* 本文下限14px */
  line-height: 2;
  text-align: center;
}
/* ケースカード */
.job-case {
  margin-top: clamp(20px, 2.396cqw, 42px);
  background-color: var(--job-case-bg);
  border: 2px solid var(--job-ink);
  border-radius: clamp(20px, 2.27cqw, 40px);
  overflow: hidden;
}
.job-case-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3.267cqw, 58px);
  padding: clamp(14px, 1.851cqw, 32px) 16px;
}
.job-case-no {
  margin: 0;
  color: var(--job-case-no);
  font-size: clamp(1.6rem, 2.27cqw, 4rem);       /* Figma 40px */
  letter-spacing: 0.02em;
  line-height: 1;
}
.job-case-title {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 3.692cqw, 6.5rem);        /* Figma 65px */
  letter-spacing: 0.05em;
  line-height: 1.15;
}
.job-case-body {
  background-color: #fff;
  /* ★2026-07-31 Figma(54:18265)準拠(森さん): 白ボディに方眼紙(グリッド)テクスチャ。薄いグレー格子。
     カード幅に連動(cqw)。旧はプレーンな白だった */
  background-image:
    linear-gradient(to right, rgba(33, 33, 33, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(33, 33, 33, 0.055) 1px, transparent 1px);
  background-size: clamp(22px, 2.3cqw, 41px) clamp(22px, 2.3cqw, 41px);
  border-top: 2px solid var(--job-ink);
  border-radius: 0 0 clamp(16px, 1.819cqw, 32px) clamp(16px, 1.819cqw, 32px);
  padding: clamp(20px, 3.376cqw, 60px) clamp(16px, 3.158cqw, 56px) clamp(28px, 3.376cqw, 60px);
}
.job-case-top {
  display: grid;
  grid-template-columns: clamp(200px, 28.317cqw, 500px) minmax(0, 1fr);
  column-gap: clamp(14px, 1.59cqw, 28px);
  align-items: center;
}
.job-case-photo {
  margin: 0;
  line-height: 0;
}
.job-case-photo img {
  width: 100%;
  aspect-ratio: 500 / 320;
  object-fit: cover;
  border-radius: 7.2% / 11.25%;   /* 画像の焼込み角丸72px(1000x640)に一致 */
  box-shadow: 0 0 0 2px var(--job-ink);   /* ★2026-07-30 box-shadowで角丸に完全追従 */
}
.job-case-text {
  padding: clamp(14px, 1.59cqw, 28px) clamp(16px, 2.042cqw, 36px);
  border: 2px solid var(--job-ink);
  border-radius: clamp(20px, 2.27cqw, 40px);
  color: var(--job-ink-warm);
  font-size: clamp(1.4rem, 1.419cqw, 2.5rem);     /* Figma 25px / 本文下限14px */
  line-height: 2;
}
.job-case-text p {
  margin: 0;
}
.job-case-text p + p {
  margin-top: 0.35em;
}
/* Aさんの例 + ラダー + 吹き出し */
.job-case-career {
  display: flex;
  flex-wrap: wrap;
  /* ★2026-07-31 Figma(54:18341)準拠(森さん): 吹き出しは現職(最終行)の横=下寄せ。旧centerは中央で上寄りだった */
  align-items: flex-end;
  justify-content: center;
  gap: clamp(20px, 3.267cqw, 58px);
  margin-top: clamp(20px, 2.614cqw, 46px);
}
.job-case-example {
  margin: 0 0 clamp(10px, 1.307cqw, 23px);
  color: #f75959;
  font-size: clamp(1.8rem, 2.548cqw, 4.5rem);      /* Figma 45px */
  letter-spacing: 0.02em;
  text-align: center;
}
.job-case-ladder {
  position: relative;
  margin: 0;
  padding: 0 0 0 0;
  list-style: none;
}
.job-case-ladder li {
  position: relative;                            /* ★2026-07-29 赤ドットの基準 */
  display: grid;
  grid-template-columns: clamp(70px, 7.079cqw, 125px) clamp(28px, 2.941cqw, 52px) minmax(0, 1fr);
  align-items: center;
}
.job-case-ladder li + li {
  margin-top: clamp(10px, 1.252cqw, 22px);
}
/* ★2026-07-29 各年次に赤ドット（1日の流れのセンターライン形式に合わせる）。
   縦線(::before)の真上・各行の縦中心に置く */
.job-case-ladder li::after {
  content: "";
  position: absolute;
  left: clamp(80px, 8.277cqw, 146px);
  top: 50%;
  width: clamp(11px, 1.198cqw, 20px);
  height: clamp(11px, 1.198cqw, 20px);
  border-radius: 50%;
  background-color: var(--job-theme);
  transform: translate(-50%, -50%);
  z-index: 1;
}
.job-case-ladder-year {
  color: #f75959;
  font-size: clamp(1.7rem, 2.548cqw, 4.5rem);      /* Figma 45px */
  line-height: 1.2;
}
.job-case-ladder-role {
  grid-column: 3;
  color: var(--job-ink);
  font-size: clamp(1.7rem, 2.548cqw, 4.5rem);
  line-height: 1.2;
  white-space: nowrap;
}
/* 年次の右の縦線。★2026-07-29 「1日の流れ」形式に統一:
   旧グレー矢印(clip-pathの矢じり)→ 赤い実線＋各年次の赤ドット(上記 li::after)。
   線は最初の年次〜最後の年次のドット位置(各行の縦中心)で終端させる */
.job-case-ladder::before {
  content: "";
  position: absolute;
  /* ★2026-07-29 線を最初/最後のドット中心で終端させる（はみ出し防止）。
     行(年次/役職)と同じフォントサイズを基準にし、上下を半行(0.6em=行高1.2の半分)に。
     em の基準がラダー継承フォントだと行の大フォントと合わずはみ出していた */
  font-size: clamp(1.7rem, 2.548cqw, 4.5rem);      /* 年次/役職と同じ→0.6emが半行 */
  top: 0.6em;                                    /* 最初の行のドット中心 */
  bottom: 0.6em;                                 /* 最後の行のドット中心 */
  left: clamp(80px, 8.277cqw, 146px);
  width: clamp(4px, 0.454cqw, 8px);               /* 1日の流れの中央線と同じ太さ */
  background-color: var(--job-theme);            /* テーマ色(赤 #f75959) */
  border-radius: 999px;
  transform: translateX(-50%);                   /* ドットと同じ中心線に合わせる */
}
/* 吹き出し（左向きしっぽ） */
.job-case-bubble {
  position: relative;
  margin: 0;
  padding: clamp(12px, 1.307cqw, 23px) clamp(18px, 3.158cqw, 56px);
  background-color: #fff;
  border: 2px solid var(--job-ink);
  border-radius: clamp(14px, 1.525cqw, 28px);
  color: var(--job-ink);
  font-size: clamp(1.3rem, 1.702cqw, 3rem);       /* Figma 30px */
  letter-spacing: 0.05em;
  line-height: 1.9;
}
.job-case-bubble::before,
.job-case-bubble::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
}
.job-case-bubble::before {
  left: calc(-1 * clamp(14px, 1.525cqw, 27px));
  transform: translateY(-50%);
  border-width: clamp(8px, 0.871cqw, 15px) clamp(14px, 1.525cqw, 27px) clamp(8px, 0.871cqw, 15px) 0;
  border-color: transparent var(--job-ink) transparent transparent;
}
.job-case-bubble::after {
  left: calc(-1 * clamp(10px, 1.089cqw, 20px));
  transform: translateY(-50%);
  border-width: clamp(6px, 0.675cqw, 12px) clamp(11px, 1.198cqw, 21px) clamp(6px, 0.675cqw, 12px) 0;
  border-color: transparent #fff transparent transparent;
}

/* ============================================================
   PC: 768px 以上は各 inner を 0.81 に縮小（サイト共通手法。ヒーローは等倍）
   ★2026-07-30 案B: 1025px→768px(タブレット帯もPCデザインを維持)
============================================================ */
@media (min-width: 768px) {
  .job-overview-inner,
  .job-daily-inner,
  .job-flow-inner,
  .job-career-inner {
    zoom: 0.81;
  }
}
/* ★2026-07-30 案A(森さん): 「1日の流れ」だけ、SP(左線1カラム)への切替を ≤640px に下げる。
   641〜767pxはPC(中央線2カラム)を維持し zoom も適用(767でSP設計が約1.2倍に拡大しすぎるのを回避)。
   hero/flow/career など他セクションは従来どおり767pxで切替 */
@media (min-width: 641px) and (max-width: 767px) {
  .job-daily-inner {
    zoom: 0.81;
  }
}

/* ============================================================
   767px 以下: SP設計（Figma 640px 54:35502）を vw + px床でスケール
   ★2026-07-30 案B: 1024px→767px(拡大率は最大1.2倍に収まる)
============================================================ */
@media (max-width: 767px) {
  .job-hero {
    height: max(120px, 28.13vw);                 /* 180px@640 */
  }
  .job-hero-photo {
    width: 53.8vw;                               /* 344px@640 */
  }
  .job-hero-body {
    left: 55%;
  }
  .job-hero-label {
    gap: max(24px, 8vw);
    font-size: max(1.2rem, 3.13vw);              /* 20px@640 */
  }
  .job-hero-title img {
    width: max(200px, 67vw);
  }
  .job-hero-title-txt {
    font-size: max(1.5rem, 4vw);
  }
  .job-hero-road {
    height: max(15px, 3.13vw);                   /* 20px@640 */
  }
  .job-hero-road::before {
    height: max(1.5px, 0.31vw);
    background-image: repeating-linear-gradient(
      to right, #fff 0, #fff 16px, transparent 16px, transparent 32px
    );
  }

  .job-overview {
    margin-top: max(20px, 4.7vw);
  }
  .job-overview-inner {
    width: calc(100% - 40px);
  }
  .job-overview-cards {
    grid-template-columns: 1fr;
    gap: max(12px, 2.5vw);
  }
  .job-overview-card {
    border-width: 2px;
    padding-bottom: max(34px, 7vw);
  }
  .job-overview-card-title {
    border-bottom-width: 2px;
  }
  .job-overview-card-title span {
    font-size: max(1.6rem, 3.9vw);
  }
  .job-overview-card-body {
    font-size: max(1.4rem, 2.5vw);               /* 16px@640 */
  }
  .job-overview-card-more {
    font-size: max(1.1rem, 2.2vw);
  }

  .job-role {
    margin-top: max(24px, 5.5vw);
  }
  .job-ribbon {
    gap: max(10px, 2.4vw);
    padding: max(6px, 1.6vw) max(16px, 4vw);
    border-radius: max(10px, 2.4vw);
  }
  .job-ribbon-no {
    font-size: max(1.3rem, 3.13vw);
  }
  .job-ribbon-tx {
    font-size: max(1.6rem, 4.2vw);
  }
}

/* ★2026-07-30 案A(森さん): 「1日の流れ」のSP(左線1カラム)は ≤640px でのみ適用。
   641〜767pxはPC2カラム(上の zoom 維持)。767でのSP拡大しすぎ(≈1.2倍)を回避する */
@media (max-width: 640px) {
  /* ---- 1日の流れ ---- */
  .job-daily {
    margin-top: max(16px, 3.9vw);
  }
  .job-daily-inner {
    width: calc(100% - 40px);
  }
  .job-daily-pill {
    margin-bottom: calc(-1 * max(10px, 2.2vw));
    padding: max(3px, 0.8vw) max(14px, 3.4vw);
    font-size: max(1.1rem, 2.5vw);               /* 16px@640 */
  }
  .job-daily-frame {
    margin: 0 max(7px, 1.7vw);
    padding: max(28px, 6.5vw) max(10px, 2.5vw) max(16px, 3.9vw);
    border-radius: max(20px, 5vw);
    box-shadow:
      0 0 0 max(6px, 1.56vw) var(--job-theme),
      0 0 0 calc(max(6px, 1.56vw) + 1.5px) var(--job-ink);
  }
  .job-daily-title {
    margin-bottom: max(16px, 3.9vw);
  }
  .job-daily-title-quote,
  .job-daily-title-main {
    font-size: max(2rem, 7.03vw);                /* 45px@640 */
  }
  .job-daily-title-sub,
  .job-daily-title-bang {
    font-size: max(1.4rem, 4.38vw);              /* 28px@640 */
  }
  .job-daily-list {
    /* ★2026-07-24 SPは項目の内端〜中央線の距離とドットを細くする */
    --job-daily-gap: max(8px, 2.2vw);
    --job-daily-dot: max(8px, 1.9vw);
    /* ★2026-07-28 SPは「左線・全幅1カラム」構成。線の左位置と項目の字下げ
       ★2026-07-30 案1(森さん): 2カラム互い違い案を撤回し、この左線1カラムに復帰 */
    --job-daily-line-x: max(16px, 4vw);
    --job-daily-indent: max(44px, 11vw);
    --job-daily-line-w: max(3px, 0.9vw);          /* ★2026-08-01 変数化(PCのcqw定義をSP用に上書き) */
    /* ★2026-07-30 (森さん): タイムライン(線+ドット+文字+写真)を1つの箱として、赤枠内で
       中央寄せ。ほぼ現状幅のまま左右均等の余白に。線とドットも同じ箱内なので一体で移動 */
    width: 88%;
    margin-inline: auto;
  }
  /* ★2026-08-01 「18:00のドットから線がはみ出ている」を修正(森さん指摘):
     旧: 全体線(::before)の bottom 固定値が退社項目の実高さと合わず、最後のドットの
     下に線が約17px残っていた。PCと同じ「各ドットから上方向の線分」方式(下記)に統一し、
     線は常に最初〜最後のドットで終端させる。全体線は廃止 */
  .job-daily-list::before { display: none; }
  /* ※セレクタはPC側の --left/--right 付きルール(詳細度0-2-1)に負けないよう同型で書く。
     左右どちらの項目も同じ左線上に置くため left/transform を明示的に統一し right を解除 */
  .job-daily-item--left .job-daily-item-main::before,
  .job-daily-item--right .job-daily-item-main::before {
    content: "";
    display: block;
    position: absolute;
    bottom: calc(100% - max(34px, 10.25vw) / 2);  /* 下端＝自分のドット(時計中心) */
    height: 300vh;                                /* 上方向へ(前のドットを越えて重なる) */
    width: var(--job-daily-line-w);
    left: calc(-1 * (var(--job-daily-indent) - var(--job-daily-line-x)) + var(--job-daily-line-w) / 2);
    right: auto;
    transform: translateX(-50%);
    background-color: var(--job-theme);
    z-index: 0;
  }
  .job-daily-list::after {                        /* 9:00ドットより上に伸びた線分を隠す白カバー */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: calc(var(--job-daily-line-x) + var(--job-daily-line-w) / 2);
    transform: translateX(-50%);
    width: calc(var(--job-daily-line-w) + 6px);
    height: calc(max(34px, 10.25vw) / 2 - var(--job-daily-dot) / 2);
    background-color: #fff;                       /* .job-daily-frame の地色 */
    z-index: 1;
  }
  /* ★2026-07-28 SPの1カラム化: 左右交互(50%幅)をやめ、全項目を全幅+左字下げに。
     PC(768px〜)の中央線+左右交互デザインは従来どおり */
  .job-daily-item,
  .job-daily-item--left,
  .job-daily-item--right {
    width: calc(100% - var(--job-daily-indent));
    margin-left: var(--job-daily-indent);
    margin-right: 0;
    grid-template-columns: 1fr;                  /* 写真はテキストの下 */
    row-gap: max(8px, 1.9vw);
    /* ★2026-07-28 PCの2カラムfloat/互い違いをSPでは解除（全幅1カラムへ） */
    float: none;
    clear: none;
    margin-bottom: 0;
  }
  /* PC専用の右カラム下オフセットを解除（通常の項目間隔に戻す） */
  .job-daily-list .job-daily-item--right:nth-child(2) {
    margin-top: max(14px, 3.4vw);
  }
  .job-daily-item-main::after {
    top: calc(max(34px, 10.25vw) / 2);           /* SPの時計サイズに合わせる */
  }
  /* ドットは左の縦線上・各項目の時計の高さに置く(左右どちらの項目も同じ式) */
  .job-daily-item--left .job-daily-item-main::after,
  .job-daily-item--right .job-daily-item-main::after {
    left: calc(-1 * (var(--job-daily-indent) - var(--job-daily-line-x)) - var(--job-daily-dot) / 2 + var(--job-daily-line-w) / 2);
    right: auto;
    transform: translateY(-50%);
  }
  .job-daily-item--left .job-daily-photo,
  .job-daily-item--right .job-daily-photo {
    grid-column: 1;
    grid-row: 2;
    width: min(100%, max(220px, 50vw));          /* 1カラム化に合わせ拡大(旧 max(150px,31.3vw)) */
    margin-top: 0;                               /* ★2026-07-28 PCの隙間ずらしをSPでは解除 */
  }
  .job-daily-item--left .job-daily-item-main,
  .job-daily-item--right .job-daily-item-main {
    grid-column: 1;
  }
  .job-daily-item + .job-daily-item {
    margin-top: max(14px, 3.4vw);
  }
  .job-daily-watch {
    width: max(34px, 10.25vw);                   /* 65.6px@640 */
  }
  .job-daily-time-tx {
    font-size: max(1.7rem, 5.16vw);              /* 33px@640 */
  }
  .job-daily-item-title {
    font-size: max(1.3rem, 3.75vw);              /* 24px@640 */
  }
  .job-daily-item-body {
    font-size: max(1.4rem, 2.5vw);               /* 本文下限14px */
    line-height: 1.45;
  }
  .job-daily-photo img,
  .job-daily-photo--empty {
    box-shadow: 0 0 0 1.5px var(--job-ink);      /* SPは縁1.5px相当 */
    border-radius: 9.86% / 12.86%;
  }
}

@media (max-width: 767px) {
  /* ---- 仕事内容 ---- */
  .job-flow {
    margin-top: max(16px, 3.9vw);
  }
  .job-flow-dots {
    width: max(4px, 0.78vw);
    height: max(24px, 5.5vw);
    background-size: 100% max(8px, 1.8vw);
    margin-bottom: max(14px, 3.4vw);
  }
  .job-flow-band {
    padding-bottom: max(20px, 4.7vw);
  }
  .job-flow-band::before {
    top: max(20px, 4.7vw);
    border-radius: 50% 50% 0 0 / max(30px, 7.5vw);
  }
  .job-flow-inner {
    width: calc(100% - 40px);
  }
  .job-flow-heading-tx {
    padding: max(6px, 1.4vw) max(10px, 2.5vw);
    font-size: max(2rem, 7.03vw);                /* 45px@640 */
  }
  .job-flow-pill {
    margin-top: max(-16px, -3.4vw);              /* ★2026-07-31 know形式の細ピル：重なりを深く */
    padding: max(2px, 0.5vw) max(12px, 2.8vw);   /* 上下を薄く */
    font-size: max(1.1rem, 2.5vw);               /* 16px@640 */
    transform: translateY(max(2px, 0.9vw));      /* SPは詰め補正を小さめに */
  }
  .job-flow-lead {
    margin-top: max(8px, 1.9vw);
    font-size: max(1.4rem, 2.5vw);
  }
  .job-flow-list {
    margin-top: max(14px, 3.4vw);
  }
  .job-flow-item + .job-flow-item {
    margin-top: max(20px, 4.7vw);
  }
  .job-flow-item-title {
    gap: max(8px, 1.9vw);
    font-size: max(1.5rem, 3.9vw);               /* 25px@640 */
  }
  .job-flow-item-no {
    font-size: max(1.9rem, 5.47vw);              /* 35px@640 */
  }
  .job-flow-item-grid {
    grid-template-columns: max(140px, 31.3vw) minmax(0, 1fr);  /* 200px@640 */
    column-gap: max(10px, 2.4vw);
  }
  .job-flow-photo img,
  .job-flow-photo--empty {
    box-shadow: 0 0 0 1.5px var(--job-ink);      /* SPは縁1.5px相当 */
    border-radius: 9.86% / 8.49%;
  }
  .job-flow-sbttl {
    padding: max(3px, 0.7vw) max(8px, 1.9vw);
    border-width: 1.5px;
    border-radius: max(8px, 1.9vw);
    font-size: max(1.25rem, 3.13vw);             /* 20px@640 */
  }
  .job-flow-body {
    margin-top: max(6px, 1.4vw);
    font-size: max(1.4rem, 2.5vw);
  }
  /* ★2026-08-01 スマホの文章折り返しを修正(森さん指摘): PC用の固定改行(job_linesのbr)が
     SPでは自然折返しと二重になり、極端に短い行が生まれていた。Figma SP(54:35502)は
     自然折返しのためSPではbrを無効化し、文末まで流し込む */
  .job-flow-body p br { display: none; }

  /* ---- キャリアステップ ---- */
  .job-career {
    margin-top: max(20px, 4.7vw);
    margin-bottom: max(40px, 9vw);               /* ★2026-07-31 フッターとの間の余白(SP) */
  }
  .job-career-inner {
    width: calc(100% - 40px);
  }
  .job-career-heading-quote,
  .job-career-heading-tx {
    font-size: max(2rem, 7.03vw);                /* 45px@640 */
  }
  .job-career-lead {
    margin-top: max(8px, 1.9vw);
    font-size: max(1.4rem, 2.5vw);
  }
  .job-case {
    margin-top: max(14px, 3.4vw);
    border-width: 1.5px;
    border-radius: max(20px, 6.25vw);
  }
  .job-case-head {
    flex-direction: column;
    gap: max(2px, 0.9vw);
    padding: max(10px, 2.4vw) 12px;
  }
  .job-case-no {
    font-size: max(1.3rem, 2.8vw);               /* 18px@640 */
  }
  .job-case-title {
    font-size: max(1.9rem, 6.25vw);              /* 40px@640 */
  }
  .job-case-body {
    border-top-width: 1.5px;
    padding: max(16px, 3.9vw) max(12px, 3vw) max(20px, 4.7vw);
  }
  .job-case-top {
    grid-template-columns: 1fr;
    row-gap: max(12px, 2.8vw);
    justify-items: center;
  }
  .job-case-photo {
    width: min(100%, max(240px, 46.9vw));        /* 300px@640 */
  }
  .job-case-photo img {
    box-shadow: 0 0 0 1.5px var(--job-ink);      /* SPは縁1.5px相当 */
    border-radius: 7.2% / 11.25%;
  }
  .job-case-text {
    padding: max(10px, 2.5vw) max(12px, 3vw);
    border-radius: max(16px, 4.7vw);
    font-size: max(1.4rem, 2.5vw);               /* 16px@640 */
  }
  .job-case-career {
    flex-direction: column;
    align-items: center;                         /* PCのflex-endをSP(縦積み)では中央へ戻す */
    gap: max(14px, 3.4vw);
    margin-top: max(14px, 3.4vw);
  }
  .job-case-example {
    margin-bottom: max(6px, 1.4vw);
    font-size: max(1.6rem, 3.9vw);               /* 25px@640 */
  }
  .job-case-ladder li {
    grid-template-columns: max(56px, 14vw) max(20px, 5vw) minmax(0, 1fr);
  }
  .job-case-ladder li + li {
    margin-top: max(8px, 1.9vw);
  }
  .job-case-ladder-year {
    font-size: max(1.4rem, 3.13vw);              /* 20px@640 */
  }
  .job-case-ladder-role {
    font-size: max(1.4rem, 3.28vw);              /* 21px@640 */
  }
  .job-case-ladder::before {
    left: max(62px, 15.5vw);
    width: max(5px, 1.5vw);
    font-size: max(1.4rem, 3.28vw);              /* SPの行(役職)フォント→0.6emが半行 */
  }
  /* ★2026-07-29 赤ドットもSPの線位置・太さに合わせる */
  .job-case-ladder li::after {
    left: max(62px, 15.5vw);
    width: max(9px, 2.6vw);
    height: max(9px, 2.6vw);
  }
  .job-case-bubble {
    padding: max(8px, 1.9vw) max(12px, 3vw);
    border-width: 1.5px;
    border-radius: max(12px, 2.8vw);
    font-size: max(1.4rem, 2.5vw);               /* 16px@640 */
    line-height: 1.8;
  }
  /* ★2026-08-01 SPの吹き出しの尻尾を修正(森さん指摘): 旧は中央の「開いたヘの字」で
     枠線の上に乗るだけの見た目だった。Figma SP(54:35502)準拠の「左上の閉じた切り欠き
     (上のはしご側を指す)」に変更 — 白い正方形を回転させて枠線に食い込ませる方式 */
  .job-case-bubble::before {
    top: 0;
    left: max(30px, 7vw);                        /* はしご(年次列)の下あたりを指す */
    width: max(11px, 2.6vw);
    height: max(11px, 2.6vw);
    border: none;
    background-color: #fff;
    border-left: 1.5px solid var(--job-ink);
    border-top: 1.5px solid var(--job-ink);
    transform-origin: center;
    transform: translateY(-50%) rotate(45deg);   /* 半分沈めて枠線を開ける(45度=2辺がちょうど枠線上で終端) */
  }
  .job-case-bubble::after { display: none; }
}

/* ★2026-07-28 「"1日の流れを紹介します!"」が320px級端末で2行に折れるのを防ぐ
   (374px以下のみ縮小。375px以上は従来どおり1行) */
@media (max-width: 374px) {
  .job-daily-title {
    white-space: nowrap;
    zoom: 0.84;
  }
}