@charset "UTF-8";

/* ========================================
   company.css
   北モってどんな会社？ページ専用スタイル
   ※ Figma: node 54:30651「Page / About Company」準拠（設計幅 PC 1920px）

   ■ スケールの考え方（--cpx）
     このページは 1920px 設計をそのまま等倍縮小すれば成立するレイアウトなので、
     「Figma の 1px」を表す長さ変数 --cpx を 1 つ定義し、全ての寸法を
     calc(N * var(--cpx)) で書く。clamp を各プロパティに書き並べる方式
     （learning.css / know.css）と比べ、Figma の実測値がそのまま残るため
     見比べ・修正がしやすい。
     縮小は know / hearing と同じ true-hold 方式：
     「まず左右余白が詰まり、余白（最小 24px×2）が尽きたら中身が縮む」。
     幅が違う 2 区分は縮小開始も独立している。
       --cpx0 / --cpx-know（ヒーロー・リード系）
         = 原寸 … 画面 約1489px 以上（コンテンツ 約1441px ＋ 余白 48px）
         = (100vw - 48px) 連動で相似縮小 … それ未満
       --cpx-learn（BUSINESS 以降）
         = 原寸 … 画面 約1132px 以上（コンテンツ 1084px ＋ 余白 48px）
         = (100vw - 48px) 連動で相似縮小 … それ未満
     下限は画面 767px 時点の値で固定（767px 以下は SP レイアウトに切替＝案B）。

   ■ SP（767px 以下）… ファイル末尾の @media ブロック
     learning と同じ「640px 設計の 1 列レイアウトを 100vw/640 で相似スケール」方式。
     単位 --spx（= 640 設計の 1px）を定義し、@media 内では --cpx 系をすべて
     --spx に差し替える。これにより上書きしていない細部（枠線・角丸・小さな
     余白）は自動で SP 向けのやや大きめ比率になり、レイアウトが変わる箇所
     （幅・積み方向・フォント）だけ明示的に上書きすればよい。
     --spx の下限 0.5px（画面 320px 時点）で極小端末でも文字を確保する。

   ■ コンテンツ幅（他ページとの統一）
     Figma（83.6% 幅設計）のままだと他ページより一回り大きいため、
     セクション区分ごとに --cpx を上書きして中身を縮小する。
       ・ヒーロー / リード … know と同じ 0.897 倍（コンテンツ幅 75%）
       ・BUSINESS 以降     … learning / about と同じ 0.81 倍
     帯（赤帯・道路）の高さと全幅背景は --cpx0（原寸）のまま維持する。
======================================== */

.company {
  /* 中央の式 = (100vw - 最小余白48px) ÷ 原寸時のコンテンツ実幅。
     上限（原寸）で hold し、余白が尽きると画面幅連動で縮む。下限は 767px 時点の値。 */
  --cpx0: clamp(0.4993px, calc((100vw - 48px) / 1440), 1px);              /* Figma 1px（原寸） */
  --cpx-know: clamp(0.4479px, calc((100vw - 48px) * 0.000623), 0.897px);  /* × 0.897（know の幅感）*/
  --cpx-learn: clamp(0.5371px, calc((100vw - 48px) * 0.000747), 0.81px);  /* × 0.81（learning の幅感）*/
  /* SP 用: 640 設計の 1px。下限 0.5px（画面 320px）〜 上限 1px（原寸で頭打ち・中央寄せ）。
     ── タブレット帯（768〜1024px）の切替メモ ──
     案B（現在）: SP 切替 767px … 768〜1024px は PC レイアウトの縮小を継続
     案A に戻す: ①末尾 @media の 767px → 1024px
                 ②上の --cpx 系 3 つの下限を 1024px 時点の値へ
                   （--cpx0: 0.6778px / --cpx-know: 0.608px / --cpx-learn: 0.7291px）
     案C: 案A ＋ --spx の上限を 1.15px（適度に大きめ表示） */
  --spx: clamp(0.5px, 0.15625vw, 1px);
  --cpx: var(--cpx0);

  --cp-red: #f75959;        /* テーマ赤（帯・プレート・見出し） */
  --cp-blue: #55baf5;       /* 整備士カード */
  --cp-green: #47d684;      /* 事務職カード */
  --cp-ink: #212121;        /* 枠線・墨色 */
  --cp-text: #2c2c2c;       /* 本文 */
  --cp-beige: #fdf8e2;      /* BUSINESS / 魅力セクションの地色 */
  --cp-pink: #ffb2b2;       /* 英字ラベル（BUSINESS / OUR JOB） */
  --cp-pink-light: #fdd;    /* ヒーローの「会社を知る」 */
  --cp-bar: #ffc7c7;        /* 魅力カード見出しの左バー */
  --cp-num: #d0cab4;        /* 魅力カードの連番（01〜05） */
  --cp-yellow: #ffcd53;     /* 吹き出しの引用符 */
  --cp-road: #595959;

  background-color: var(--color-bg);
  overflow-x: clip;         /* 影プレートが右端に寄る幅で横スクロールを出さない */
}

/* ============================================================
   色文字見出しの黒縁取り（見本 260722 準拠）
   対象: リードキャッチ / 和文見出し / 事業内容カードタイトル /
         職種名（青・緑含む）とサブ / 吹き出し / 魅力カード見出し
   対象外: 英字ラベル（BUSINESS 等）・本文・魅力の連番
   -webkit-text-stroke は中心線基準なので、paint-order で塗りを上に重ね
   「外側だけ」に見せる（見える太さ＝指定の半分）。em 指定のため
   文字サイズが違っても縁の見た目比率（約2%）は揃う。
   ※ストローク幅は各要素の font-size 基準にしたいので、font-size を
     持つ子（連番・サブ）にも個別に指定している（継承だと親の px 値になる）。
============================================================ */
.company-lead-catch,
.company-heading-ja,
.company-business-head,
.company-business-num,
.company-job-name,
.company-job-sub,
.company-appeal-bubble,
.company-appeal-head {
  -webkit-text-stroke: 0.04em var(--cp-ink);  /* 見える太さは半分の約2% */
  paint-order: stroke fill;
}

/* ============================================================
   Hero（赤帯＋「会社を知る」＋タイトル画像＋道路＋右の写真）
   Figma 54:30679 … 帯 h380 / 道路 h40 / 写真 741x320
============================================================ */
.company-hero {
  position: relative;
  z-index: 0;
}
.company-hero-band {
  height: calc(380 * var(--cpx));
  background-color: var(--cp-red);
}
/* 道路（about / learning と同手法：灰色帯＋中央の白い破線） */
.company-hero-road {
  position: relative;
  height: calc(40 * var(--cpx));
  background-color: var(--cp-road);
}
.company-hero-road::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: calc(4 * var(--cpx));
  transform: translateY(-50%);
  background-image: repeating-linear-gradient(
    to right,
    #fff 0,
    #fff calc(30 * var(--cpx)),
    transparent calc(30 * var(--cpx)),
    transparent calc(60 * var(--cpx))
  );
}

/* ヒーローの中身（ラベル・タイトル・写真）は know 幅感（0.897 倍）。
   横位置は「中央寄せしたコンテンツ箱（設計幅 1606 = 半分 803）」からの
   オフセットでアンカーする（50% ± N*--cpx）。余白はここから自動で生まれ、
   余白が尽きると --cpx の縮小に切り替わる（true-hold）。
   縦位置は帯高さ 380 維持のまま上下バランスを取り直した値。 */

/* 「会社を知る」Figma x177（箱左端 +20）y225（帯上端から 80） */
.company-hero-label {
  --cpx: var(--cpx-know);
  position: absolute;
  top: calc(91 * var(--cpx0));
  left: calc(50% - 783 * var(--cpx));       /* 箱左端(-803) + 20 */
  z-index: 2;
  margin: 0;
  color: var(--cp-pink-light);
  font-size: calc(40 * var(--cpx));
  letter-spacing: calc(2 * var(--cpx));
  line-height: 1;
}

/* タイトル画像。company-hero-title.png は文字の周りに余白があり、
   実インク領域は 2062x440 中の (47,96)-(1995,347)。
   Figma のテキスト左端 x188 / 中心 y367 に合うよう、画像幅 1016px・
   左 165px・上 112.9px（帯上端から）に置いている。*/
.company-hero-title {
  --cpx: var(--cpx-know);
  position: absolute;
  top: calc(120 * var(--cpx0));
  left: calc(50% - 795 * var(--cpx));       /* 箱左端(-803) + 8 */
  z-index: 2;
  margin: 0;
  width: calc(1016 * var(--cpx));
  line-height: 0;
}
.company-hero-title img {
  width: 100%;
  height: auto;
}

/* 右の写真（角丸なし・黒枠 3px）Figma x1022 y180 → 右から 157 */
.company-hero-photo {
  --cpx: var(--cpx-know);
  position: absolute;
  top: calc(50 * var(--cpx0));
  right: calc(50% - 803 * var(--cpx));      /* 箱右端に揃える */
  z-index: 1;
  margin: 0;
  width: calc(741 * var(--cpx));
  line-height: 0;
}
.company-hero-photo img {
  width: 100%;
  aspect-ratio: 741 / 320;
  object-fit: cover;
  border: calc(3 * var(--cpx)) solid var(--cp-ink);
  box-sizing: border-box;
}

/* ============================================================
   リード（左：キャッチ＋本文／右：写真2枚）Figma 54:30700
============================================================ */
.company-lead {
  --cpx: var(--cpx-know);                 /* 中身は know 幅感（0.897 倍） */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  /* コンテンツ箱（設計幅 1606）を中央寄せ。左右余白は自動（true-hold） */
  width: calc(1606 * var(--cpx));
  margin: 0 auto;
  padding: calc(71 * var(--cpx)) 0 calc(50 * var(--cpx));
}
.company-lead-tx {
  width: calc(621 * var(--cpx));
  flex: 0 0 auto;
}
.company-lead-catch {
  margin: 0;
  color: var(--cp-red);
  font-size: calc(55 * var(--cpx));
  line-height: 1.5;                       /* Figma 82.5/55 */
  letter-spacing: calc(2.75 * var(--cpx));
  white-space: nowrap;                    /* 改行位置は <br> で固定（Figma どおり3行） */
}
.company-lead-text {
  margin: calc(29.5 * var(--cpx)) 0 0;
  color: var(--cp-text);
  font-size: calc(25 * var(--cpx));
  line-height: 2;                         /* Figma 50/25 */
}

/* 写真2枚（角丸 40・黒枠 2px・赤い影プレート）。2枚目は 33px 下げる。*/
.company-lead-photos {
  display: flex;
  /* stretch のままだと 2 枚目の margin-top(33) ぶん 1 枚目の figure が縦に伸び、
     赤プレート(height:100%)が写真より下へ大きくはみ出す */
  align-items: flex-start;
  flex: 0 0 auto;
  gap: calc(25 * var(--cpx));
  width: calc(981 * var(--cpx));          /* 写真 473×2 ＋ 隙間 25 ＋ 影プレート 10 */
  margin-top: calc(9 * var(--cpx));       /* Figma: キャッチ上端 636 → 写真上端 645 */
}
.company-lead-photo {
  position: relative;
  flex: 0 0 calc(473 * var(--cpx));
  margin: 0;
  line-height: 0;
}
.company-lead-photo--lower {
  margin-top: calc(33 * var(--cpx));
}
.company-lead-photo::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(11 * var(--cpx));
  left: calc(10 * var(--cpx));
  width: 100%;
  height: 100%;
  border: calc(2 * var(--cpx)) solid var(--cp-ink);
  border-radius: calc(40 * var(--cpx));
  background-color: var(--cp-red);
  box-sizing: border-box;
}
.company-lead-photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 473 / 362;
  object-fit: cover;
  border: calc(2 * var(--cpx)) solid var(--cp-ink);
  border-radius: calc(40 * var(--cpx));
  box-sizing: border-box;
}

/* ============================================================
   セクション見出し（BUSINESS / OUR JOB 共通）
   Figma: 英字 35px #ffb2b2 → 和文 50px #f75959 → リード 25px
============================================================ */
.company-heading {
  text-align: center;
}
.company-heading-en {
  margin: 0;
  color: var(--cp-pink);
  font-size: calc(35 * var(--cpx));
  letter-spacing: calc(0.875 * var(--cpx));
  line-height: 1;
}
.company-heading-ja {
  margin: calc(13.5 * var(--cpx)) 0 0;
  color: var(--cp-red);
  font-size: calc(50 * var(--cpx));
  letter-spacing: calc(1.25 * var(--cpx));
  line-height: 1;
}
.company-heading-lead {
  margin: calc(15 * var(--cpx)) 0 0;
  color: var(--cp-text);
  font-size: calc(25 * var(--cpx));
  line-height: 2;
}

/* ============================================================
   BUSINESS（事業内容 4 枚）Figma 54:30801
   カード 659x200 / 角丸 40 / 黒枠 3px / 影プレートは真下 11px
============================================================ */
/* position/z-index は影プレート（::before の負 z-index）を
   セクション地色より前面に出すための stacking context。 */
.company-business {
  --cpx: var(--cpx-learn);                /* 中身は learning 幅感（0.81 倍） */
  position: relative;
  z-index: 0;
  padding: calc(40.5 * var(--cpx)) 0 calc(55 * var(--cpx));
  background-color: var(--cp-beige);
}
.company-business-list {
  display: grid;
  grid-template-columns: repeat(2, calc(659 * var(--cpx)));
  justify-content: center;
  column-gap: calc(20 * var(--cpx));
  row-gap: calc(31 * var(--cpx));         /* 影プレート 11 ぶん込みで見た目 20 */
  margin: calc(27 * var(--cpx)) 0 0;
  padding: 0;
  list-style: none;
}
.company-business-card {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(200 * var(--cpx));
  padding: 0 calc(27 * var(--cpx)) 0 calc(52 * var(--cpx));  /* 枠線 3px 込みで Figma の 55 */
  border: calc(3 * var(--cpx)) solid var(--cp-ink);
  border-radius: calc(40 * var(--cpx));
  background-color: #fff;
  box-sizing: border-box;
}
/* 影プレート（赤・真下 11px） */
.company-business-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(8 * var(--cpx));               /* 枠線 3px を含めて Figma の +11 に合わせる */
  left: calc(-3 * var(--cpx));
  width: calc(659 * var(--cpx));
  height: calc(200 * var(--cpx));
  border: calc(3 * var(--cpx)) solid var(--cp-ink);
  border-radius: calc(40 * var(--cpx));
  background-color: var(--cp-red);
  box-sizing: border-box;
}
.company-business-icon {
  flex: 0 0 auto;
  width: calc(91 * var(--cpx));
  height: calc(91 * var(--cpx));
  object-fit: contain;
}
.company-business-tx {
  margin-left: calc(35 * var(--cpx));
}
.company-business-head {
  display: flex;
  align-items: baseline;
  gap: calc(16 * var(--cpx));
  margin: 0;
  color: var(--cp-red);
  font-size: calc(50 * var(--cpx));
  letter-spacing: calc(2.5 * var(--cpx));
  line-height: 1;
  white-space: nowrap;
}
.company-business-num {
  font-size: calc(30 * var(--cpx));
  letter-spacing: 0;
}
.company-business-desc {
  margin: calc(23.5 * var(--cpx)) 0 0;    /* Figma の行送り 50 を line-height:1 で組み直した値 */
  color: var(--cp-text);
  font-size: calc(25 * var(--cpx));
  line-height: 1;
  white-space: nowrap;
}

/* ============================================================
   OUR JOB（職種 3 枚）Figma 54:30944
   カード 1338x327 / 写真 450x287 / CTA 300x56
============================================================ */
.company-job {
  --cpx: var(--cpx-learn);                /* 中身は learning 幅感（0.81 倍） */
  position: relative;
  z-index: 0;
  padding: calc(60.5 * var(--cpx)) 0 0;
}
.company-job-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(51 * var(--cpx));             /* 影プレート 11 ぶん込みで見た目 40 */
  margin: calc(32 * var(--cpx)) 0 0;
  padding: 0;
  list-style: none;
}
.company-job-card {
  position: relative;
  display: flex;
  align-items: stretch;                   /* .company-job-tx をカード高いっぱいに（CTA の bottom 基準）*/
  width: calc(1338 * var(--cpx));
  height: calc(327 * var(--cpx));
  padding: calc(17 * var(--cpx));         /* 枠線 3px 込みで Figma の 20 */
  border: calc(3 * var(--cpx)) solid var(--cp-ink);
  border-radius: calc(40 * var(--cpx));
  background-color: #fff;
  box-sizing: border-box;
}
.company-job-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(8 * var(--cpx));
  left: calc(-3 * var(--cpx));
  width: calc(1338 * var(--cpx));
  height: calc(327 * var(--cpx));
  border: calc(3 * var(--cpx)) solid var(--cp-ink);
  border-radius: calc(40 * var(--cpx));
  box-sizing: border-box;
}
/* カード色（影プレート・見出し・ボタン）*/
.company-job-card--sale   { --cp-accent: var(--cp-red); }
.company-job-card--tech   { --cp-accent: var(--cp-blue); }
.company-job-card--office { --cp-accent: var(--cp-green); }
.company-job-card::before { background-color: var(--cp-accent); }

/* 写真素材の PNG には角丸（透明の四隅）が焼き込まれており、img 自身に
   枠線＋角丸を付けると縮小時に「画像側の角丸」と「CSS の角丸」の半径差で
   四隅に白い隙間が出る。枠線・角丸クリップは figure 側に持たせ、
   img を 6% 拡大して焼き込みの透明部分をクリップ外へ追い出す。 */
.company-job-photo {
  flex: 0 0 auto;
  align-self: flex-start;
  position: relative;
  overflow: hidden;
  margin: 0;
  width: calc(450 * var(--cpx));
  aspect-ratio: 450 / 287;
  border: calc(3 * var(--cpx)) solid var(--cp-ink);
  border-radius: calc(40 * var(--cpx));
  box-sizing: border-box;
}
.company-job-photo img {
  position: absolute;
  top: -3%;
  left: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
}
.company-job-tx {
  position: relative;
  flex: 1 1 auto;
  margin-left: calc(45.5 * var(--cpx));
  padding-top: calc(33.5 * var(--cpx));    /* 見出しの行ボックス中心を Figma の 2217.5 に合わせる */
}
.company-job-name {
  display: flex;
  align-items: baseline;
  gap: calc(25 * var(--cpx));
  margin: 0;
  color: var(--cp-accent);
  font-size: calc(60 * var(--cpx));
  letter-spacing: calc(3 * var(--cpx));
  line-height: 1;
  white-space: nowrap;
}
/* 職種の英字サブ（カタカナ）は Figma でプロポーショナル字送り。
   ベタ組みだとカード幅を超えやすいため palt を有効にする。*/
.company-job-sub {
  font-size: calc(40 * var(--cpx));
  letter-spacing: calc(2 * var(--cpx));
  font-feature-settings: "palt" 1;
}
/* ★2026-08-21 事務職だけ 34px に落としていた指定を削除。21文字の
   「テクニカルアドバイザー/アンバサダークルー」が右枠からはみ出すための逃げだったが、
   アンバサダークルーの掲載取りやめで11文字になり、他2枚と同じ 40px で収まる。
   残しておくと事務職のサブだけ小さく見えてしまうため */
.company-job-desc {
  margin: calc(40.5 * var(--cpx)) 0 0;
  color: var(--cp-text);
  font-size: calc(25 * var(--cpx));
  line-height: 1;
}
.company-job-tx .company-btn {
  position: absolute;
  right: calc(37 * var(--cpx));            /* Figma: カード右端から 60（枠線＋padding を差引） */
  bottom: calc(19.5 * var(--cpx));
  width: calc(300 * var(--cpx));
  background-color: var(--cp-accent);
}

/* ============================================================
   共通 CTA ボタン（Figma: 高さ 56 / 角丸 500 / Dela 25px）
   既定は色地＋白文字。--plain は白地＋黒文字（魅力03 の教育制度リンク）。
============================================================ */
.company-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--cpx));
  height: calc(56 * var(--cpx));
  padding: 0 calc(33 * var(--cpx));
  border: calc(1 * var(--cpx)) solid var(--cp-ink);
  border-radius: calc(500 * var(--cpx));
  color: #fff;
  font-size: calc(25 * var(--cpx));
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  box-sizing: border-box;
  transition: opacity 0.2s ease;
}
.company-btn:hover {
  opacity: 0.8;
}
.company-btn-arrow {
  width: calc(48.8 * var(--cpx));
  height: auto;
  flex: 0 0 auto;
}
.company-btn--plain {
  gap: calc(15 * var(--cpx));
  padding: 0 calc(25 * var(--cpx));
  background-color: #fff;
  color: var(--cp-ink);
}

/* ============================================================
   北モのここが魅力！（5 枚）Figma 54:31097
   吹き出し見出し＋カード 1250x390（写真 482x350 / 影プレート右下 10px）
============================================================ */
.company-appeal {
  --cpx: var(--cpx-learn);                /* 中身は learning 幅感（0.81 倍） */
  position: relative;
  z-index: 0;
  margin-top: calc(80 * var(--cpx));
  padding-bottom: calc(274 * var(--cpx));
}
/* 地色（#fdf8e2）は見出しの途中から始まる。Figma: セクション上端 +67 */
.company-appeal::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: calc(67 * var(--cpx));
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: var(--cp-beige);
}

/* 見出し：白い吹き出し（下向きしっぽ）＋左右の黄色い引用符 */
.company-appeal-title {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  padding-top: calc(28 * var(--cpx));      /* テキスト上端 3297 → 吹き出し上端 3325 */
}
.company-appeal-bubble {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Figma は 650 だが、それだと箱の内側の余白（左右 25）より引用符（幅 39）の方が
     大きく、引用符が黒枠をまたいで外へ出てしまう。引用符の位置は変えずに
     箱だけを広げて内側へ収める（跡田さん判断・案A）。
     幅は一度 780 にしたが横に伸びすぎたため 725 に短縮（比較モックの案②）。
     下限は 690（そこで枠と引用符が接触する）。 */
  width: calc(725 * var(--cpx));
  height: calc(88.8 * var(--cpx));
  border: calc(3 * var(--cpx)) solid var(--cp-ink);
  border-radius: calc(24 * var(--cpx));
  background-color: #fff;
  color: var(--cp-red);
  font-size: calc(65 * var(--cpx));
  letter-spacing: calc(1.625 * var(--cpx));
  line-height: 1;
  box-sizing: border-box;
}
/* しっぽ（黒枠ぶんを ::before、白い内側を ::after の 2 枚重ね） */
.company-appeal-bubble::before,
.company-appeal-bubble::after {
  content: "";
  position: absolute;
  left: 52%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
}
.company-appeal-bubble::before {
  top: 100%;
  border-width: calc(35 * var(--cpx)) calc(17 * var(--cpx)) 0;
  border-top-color: var(--cp-ink);
}
.company-appeal-bubble::after {
  top: calc(100% - 3 * var(--cpx));
  border-width: calc(30 * var(--cpx)) calc(13 * var(--cpx)) 0;
  border-top-color: #fff;
}
.company-appeal-quote {
  position: relative;
  z-index: 1;                              /* 吹き出し（白地）より前面に出す */
  align-self: flex-start;
  margin-top: calc(-14 * var(--cpx));
  color: var(--cp-yellow);
  font-size: calc(80 * var(--cpx));
  line-height: 1;
}
/* 引用符は箱の端に張り付くため、箱を広げた分だけ内側へ引き戻す（-19 → -56.6）。
   これで引用符の画面上の位置は従来のまま、黒枠だけが外側へ回り込む。
   値の出し方: 枠→引用符 = -(引用符の要素幅 39.3) - margin  →  17.3 が得られる値。
   上の margin-top が左右で -14 / -1 と違うのは字形の差を吸収するためで、
   実際のインクの高さは左右でほぼ揃っている（現状維持・跡田さん判断）。 */
.company-appeal-quote:first-child { margin-right: calc(-56.6 * var(--cpx)); }
.company-appeal-quote:last-child  { margin-left: calc(-56.6 * var(--cpx)); margin-top: calc(-1 * var(--cpx)); }

.company-appeal-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Figma は見た目 20（gap 30）だが窮屈なため、職種カードと同じ見た目 40 に拡大 */
  gap: calc(50 * var(--cpx));             /* 影プレート 10 ぶん込みで見た目 40 */
  margin: calc(51 * var(--cpx)) 0 0;
  padding: 0;
  list-style: none;
}
/* カード＋影プレート（右下 10px）で 1260 幅。連番はその外・左に置く。*/
.company-appeal-item {
  position: relative;
  width: calc(1260 * var(--cpx));
}
.company-appeal-num {
  position: absolute;
  top: 0;
  left: calc(-93 * var(--cpx));
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(120 * var(--cpx));
  height: calc(43 * var(--cpx));
  transform: rotate(90deg);                /* 中心は動かないので Figma と同位置 */
  color: var(--cp-num);
  font-size: calc(35 * var(--cpx));
  line-height: 1;
}
.company-appeal-card {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(1250 * var(--cpx));
  min-height: calc(390 * var(--cpx));
  padding: calc(17 * var(--cpx));         /* 枠線 3px 込みで Figma の 20 */
  border: calc(3 * var(--cpx)) solid var(--cp-ink);
  border-radius: calc(40 * var(--cpx));
  background-color: #fff;
  box-sizing: border-box;
}
.company-appeal-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(7 * var(--cpx));
  left: calc(7 * var(--cpx));
  width: calc(1250 * var(--cpx));
  height: calc(100% + 6 * var(--cpx));
  border: calc(3 * var(--cpx)) solid var(--cp-ink);
  border-radius: calc(40 * var(--cpx));
  background-color: var(--cp-red);
  box-sizing: border-box;
}
/* 職種カードの写真と同じく、焼き込み角丸との半径差対策で figure 側でクリップ */
.company-appeal-photo {
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  margin: 0;
  width: calc(482 * var(--cpx));
  aspect-ratio: 482 / 350;
  border: calc(3 * var(--cpx)) solid var(--cp-ink);
  border-radius: calc(30 * var(--cpx));
  box-sizing: border-box;
}
.company-appeal-photo img {
  position: absolute;
  top: -3%;
  left: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
}
.company-appeal-tx {
  flex: 0 0 auto;
  width: calc(672 * var(--cpx));
  margin-left: calc(40.5 * var(--cpx));    /* 写真右端 +502 → 本文左端 +542.5 */
}
.company-appeal-head {
  position: relative;
  margin: 0 0 0 calc(31.5 * var(--cpx));   /* 左バーぶん本文よりインデント */
  color: var(--cp-red);
  font-size: calc(50 * var(--cpx));
  letter-spacing: calc(2.5 * var(--cpx));
  line-height: 1.25;                       /* Figma 62.5/50 */
}
/* 見出し左の縦バー（#ffc7c7・幅 10・上下 5.5/6 内側） */
.company-appeal-head::before {
  content: "";
  position: absolute;
  top: calc(5.5 * var(--cpx));
  left: calc(-31.5 * var(--cpx));
  width: calc(10 * var(--cpx));
  height: calc(100% - 11.5 * var(--cpx));
  background-color: var(--cp-bar);
}
.company-appeal-body {
  margin: calc(13.5 * var(--cpx)) 0 0;
  color: var(--cp-text);
  font-size: calc(25 * var(--cpx));
  line-height: 2;
}
/* 魅力03 の CTA。Figma では本文最終行の右側に重なって置かれている。*/
.company-appeal-tx .company-btn {
  display: flex;
  width: calc(439 * var(--cpx));
  margin: calc(-10 * var(--cpx)) 0 0 auto;
}

/* ============================================================
   SP レイアウト（1024px 以下）
   640px 設計の 1 列レイアウトを --spx（100vw/640）で相似スケール。
   コンテンツ幅 576（左右余白 32×2）。
   構成（ヒアリング済み 260723）:
     ・ヒーロー: ラベル → タイトル → 写真 を赤帯内に縦積み
     ・リード: 文章 → 写真2枚横並び
     ・事業内容: 横長カードのまま 1 列 ×4
     ・職種/魅力カード: 写真上・文章下の縦積み、ボタン右寄せ
============================================================ */
@media (max-width: 767px) {

  /* 単位を SP 用へ一括差し替え。上書きしない細部（枠線・角丸・小余白）は
     1920 設計値 × --spx となり、SP 向けのやや大きめ比率で自動描画される */
  .company {
    --cpx0: var(--spx);
    --cpx-know: var(--spx);
    --cpx-learn: var(--spx);
    --cpx: var(--spx);
  }

  /* ---- ヒーロー: 縦積み（帯高 470 = 28+ラベル+タイトル+写真+下余白） ---- */
  .company-hero-band { height: calc(470 * var(--spx)); }
  .company-hero-road { height: calc(24 * var(--spx)); }
  /* 横位置は中央基準（50% ± N*--spx）。--spx が上限で頭打ちした画面
     （641px 以上）でも、下のコンテンツ列と同じく中央に揃う */
  .company-hero-label {
    top: calc(28 * var(--spx));
    left: calc(50% - 288 * var(--spx));  /* 640設計の x32（中心-288） */
    font-size: calc(26 * var(--spx));
  }
  /* タイトル画像は上側に約27px（表示時）の透明余白を含むため、
     「会社を知る」との見た目の間隔が空きすぎないよう top は詰めた値 */
  .company-hero-title {
    top: calc(42 * var(--spx));
    left: calc(50% - 296 * var(--spx));  /* 640設計の x24（中心-296） */
    width: calc(592 * var(--spx));       /* 592 × (440/2062) ≒ 高さ 126 */
  }
  .company-hero-photo {
    top: calc(186 * var(--spx));         /* タイトル下端 168 ＋ 18 */
    right: calc(50% - 296 * var(--spx));
    width: calc(592 * var(--spx));
  }

  /* ---- リード: 文章 → 写真2枚横並び ---- */
  .company-lead {
    flex-direction: column;
    width: calc(576 * var(--spx));
    padding: calc(40 * var(--spx)) 0;
  }
  .company-lead-tx { width: 100%; }
  .company-lead-catch { font-size: calc(42 * var(--spx)); }
  .company-lead-text {
    margin-top: calc(16 * var(--spx));
    font-size: calc(24 * var(--spx));
  }
  .company-lead-photos {
    width: 100%;
    gap: calc(16 * var(--spx));
    margin-top: calc(24 * var(--spx));
  }
  .company-lead-photo { flex: 1 1 0; }

  /* ---- セクション見出し ---- */
  .company-heading-en { font-size: calc(22 * var(--spx)); }
  .company-heading-ja { font-size: calc(34 * var(--spx)); margin-top: calc(8 * var(--spx)); }
  .company-heading-lead { font-size: calc(22 * var(--spx)); margin-top: calc(10 * var(--spx)); }

  /* ---- 事業内容: 1 列 ×4 ---- */
  .company-business-list {
    grid-template-columns: calc(576 * var(--spx));
    row-gap: calc(23 * var(--spx));      /* 影プレート込みで見た目 15 */
    margin-top: calc(24 * var(--spx));
  }
  .company-business-card {
    height: calc(120 * var(--spx));
    padding: 0 calc(24 * var(--spx)) 0 calc(36 * var(--spx));
  }
  .company-business-card::before {
    width: calc(576 * var(--spx));
    height: calc(120 * var(--spx));
  }
  .company-business-icon { width: calc(56 * var(--spx)); height: calc(56 * var(--spx)); }
  .company-business-tx { margin-left: calc(20 * var(--spx)); }
  .company-business-head { font-size: calc(30 * var(--spx)); gap: calc(10 * var(--spx)); }
  .company-business-num { font-size: calc(20 * var(--spx)); }
  .company-business-desc { margin-top: calc(12 * var(--spx)); font-size: calc(20 * var(--spx)); }

  /* ---- 職種カード: 写真上・文章下 ---- */
  .company-job-list { margin-top: calc(24 * var(--spx)); }
  .company-job-card {
    flex-direction: column;
    width: calc(576 * var(--spx));
    height: auto;
    padding: calc(16 * var(--spx));
  }
  .company-job-card::before {
    width: calc(576 * var(--spx));
    height: calc(100% + 6 * var(--spx));
  }
  .company-job-photo { width: 100%; align-self: stretch; }
  .company-job-tx {
    margin-left: 0;
    padding-top: calc(20 * var(--spx));
  }
  .company-job-name { font-size: calc(40 * var(--spx)); }
  .company-job-sub { font-size: calc(26 * var(--spx)); }
  /* 事務職の長いサブは 1 行に収まらないため、SP では職種名の下の行へ折り返す */
  .company-job-card--office .company-job-name {
    flex-wrap: wrap;
    row-gap: calc(8 * var(--spx));
  }
  .company-job-card--office .company-job-sub { font-size: calc(26 * var(--spx)); }
  .company-job-desc {
    margin-top: calc(16 * var(--spx));
    font-size: calc(24 * var(--spx));
    line-height: 1.7;
  }
  /* ボタンは絶対配置をやめて流し込み・右寄せ
     (既定の inline-flex はインラインレベルで margin-left:auto が 0 扱いになり
      右寄せが効かないため、魅力03 の CTA と同じ flex ＋ 幅指定でブロック化する) */
  .company-job-tx .company-btn {
    position: static;
    display: flex;
    width: fit-content;
    margin: calc(20 * var(--spx)) 0 calc(4 * var(--spx)) auto;
  }

  /* ---- CTA ボタン共通 ---- */
  .company-btn {
    height: calc(48 * var(--spx));
    font-size: calc(22 * var(--spx));
  }
  .company-btn-arrow { width: calc(40 * var(--spx)); }

  /* ---- 北モのここが魅力！: 写真上・文章下 ---- */
  .company-appeal { padding-bottom: calc(80 * var(--spx)); }
  .company-appeal-bubble {
    /* SP は箱の内側に余白が 60 あり引用符（幅 21.5）が元から入るため、
       PC のように広げる必要はない（広げると引用符が文字から離れて間延びする）。
       Figma 原寸の 440 だと枠に対する余白が 6.7% と PC（2.4%）より緩かったため
       400 に短縮（比較モックの案②）。下限は 382（そこで枠と引用符が接触する）。 */
    width: calc(400 * var(--spx));
    height: calc(64 * var(--spx));
    font-size: calc(34 * var(--spx));
    border-radius: calc(16 * var(--spx));
  }
  .company-appeal-bubble::before { border-width: calc(24 * var(--spx)) calc(12 * var(--spx)) 0; }
  .company-appeal-bubble::after { border-width: calc(20 * var(--spx)) calc(9 * var(--spx)) 0; }
  .company-appeal-quote {
    margin-top: calc(-8 * var(--spx));
    font-size: calc(44 * var(--spx));
  }
  /* 引用符は箱の端に張り付くため、箱を縮めた分だけ内側へ引き戻す（-10 → -31）。
     これで引用符と文字の位置は変わらず、黒枠だけが内側へ寄る。
     値の出し方: 枠→引用符 = -(引用符の要素幅 21.5) - margin  →  9.5 が得られる値。 */
  .company-appeal-quote:first-child { margin-right: calc(-31 * var(--spx)); }
  .company-appeal-quote:last-child { margin-left: calc(-31 * var(--spx)); }
  .company-appeal-list { margin-top: calc(28 * var(--spx)); }
  .company-appeal-item { width: calc(576 * var(--spx)); }
  /* 連番はカード左に回転配置 → カード上に横書きで置く */
  .company-appeal-num {
    position: static;
    display: block;
    width: auto;
    height: auto;
    transform: none;
    margin: 0 0 calc(6 * var(--spx)) calc(8 * var(--spx));
    font-size: calc(24 * var(--spx));
  }
  .company-appeal-card {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-height: 0;
    padding: calc(16 * var(--spx));
  }
  .company-appeal-card::before { width: 100%; }
  .company-appeal-photo { width: 100%; }
  .company-appeal-tx {
    width: auto;
    margin: calc(20 * var(--spx)) 0 0;
  }
  .company-appeal-head { font-size: calc(30 * var(--spx)); margin-left: calc(20 * var(--spx)); }
  .company-appeal-head::before { width: calc(6 * var(--spx)); left: calc(-20 * var(--spx)); }
  .company-appeal-body {
    margin-top: calc(12 * var(--spx));
    font-size: calc(24 * var(--spx));
    line-height: 1.8;
  }
  .company-appeal-tx .company-btn { margin-top: calc(16 * var(--spx)); }
}