@charset "UTF-8";

/* ========================================
   about.css
   数字で見るページ専用スタイル
   設計幅: PC 1920px / カード列幅 約1326px
   Figma: node 54-29869（Page / Company Numbers）
======================================== */

.about {
  /* ★2026-08-27 年間販売台数の内訳2行ぶんの高さ。
     この分だけ全カードの min-height を底上げし、内訳を持たないカードには
     同じ高さの余白を数字の下に入れることで、3セクションとも同じ大きさに揃える
     （跡田さん指摘「1個1個のブロックサイズが違う。統一できない？」） */
  --ab-bd-h: calc(2 * 1.5 * clamp(1.2rem, 1.15vw, 2.2rem) + clamp(4px, 0.42vw, 8px));

  --ab-yellow: #ffcd53;     /* ヒーロー黄帯・働く人カード */
  --ab-red: #f75959;        /* 会社のことカードの影 */
  --ab-red-num: #f44848;    /* 会社のことカードの数字 */
  --ab-green: #47d684;      /* アンケートカード */
  --ab-ink: #212121;
  --ab-text: #2c2c2c;
  --ab-gray: #666;          /* カード枠 */
  --ab-road: #595959;

  background-color: #fffdf4;
}

/* ============================================================
   Hero（黄帯＋タイトル＋道路＋リード＋周辺装飾）
   Figma(1920): 黄帯 h117.5。タイトルは帯下端と道路（h40）に跨る。
============================================================ */
.about-hero {
  position: relative;
  z-index: 1;                /* 右の車が下の #fdf8e2 帯に跨るため前面に */
}
.about-hero-band {
  position: relative;
  height: clamp(80px, 6.12vw, 118px);      /* Figma 117.5px */
  background-color: var(--ab-yellow);
}
/* タイトル画像（数字で見る）。帯下端と道路に跨って中央配置 */
.about-hero-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(55%);
  z-index: 2;
  margin: 0;
  line-height: 0;
  text-align: center;
}
.about-hero-title-img {
  /* ★2026-08-07 Figmaのタイトル文字枠は500px。縁取り・影を焼き込んだ画像のぶんを見込んで
     590→540px に縮小（跡田さん選択・案B）*/
  width: clamp(220px, 28.1vw, 540px);      /* 画像 1180×470 */
  height: auto;
}

/* 道路ライン（question / message と同手法） */
.about-hero-road {
  position: relative;
  width: 100%;
  height: clamp(22px, 2.084vw, 40px);      /* Figma 40px */
  background-color: var(--ab-road);
}
.about-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%);
}

/* リード（ロゴ・文章・下向き矢印）。中央縦積み */
.about-hero-lead {
  /* ★2026-08-07 104→64px。Figma(54:29907)のロゴ上端はヒーロー内 221.6px＝道路下端(158px)から
     63.6px。旧値はタイトルの高さを見込んで多めに取っていたが、ロゴ以下が78px沈んでいた（案B）*/
  padding-top: clamp(24px, 3.313vw, 64px);
  text-align: center;
}
.about-hero-logo {
  width: clamp(200px, 18.88vw, 362px);     /* Figma 362px */
  /* ★2026-08-07 Figmaのヒーローロゴは社名のワードマークのみ（362×52.8）。支給画像 logo.webp は
     「RECRUIT SITE」付きの組みロゴ1枚なので、ワードマークが占める上 65/446 だけを切り出す。
     ワードマーク単体の画像を支給いただければ、この切り出しは不要になる（案B）*/
  aspect-ratio: 446 / 65;
  height: auto;
  object-fit: cover;
  object-position: top;
}
.about-hero-text {
  margin: clamp(10px, 0.9vw, 17px) auto 0; /* ロゴ→文章 Figma 約17px */
  color: var(--ab-text);
  font-size: clamp(1.4rem, 1.303vw, 2.5rem);  /* Figma 25px */
  line-height: 2;
}
.about-hero-text p {
  margin: 0;
}
.about-hero-arrow {
  display: block;
  height: clamp(36px, 3.13vw, 60px);       /* Figma 60px */
  width: auto;
  margin: clamp(8px, 0.8vw, 15px) auto 0;
}

/* ---- 周辺装飾（写真2枚・車2台・キラキラ）。座標は Figma(1920) 比率 ---- */
.about-hero-photo,
.about-hero-car,
.about-hero-spark {
  position: absolute;
  height: auto;
  pointer-events: none;
}
.about-hero-photo--1 {                      /* Figma: 191,206（abs）→ hero 内 62.5px */
  left: 9.95vw;
  top: 3.26vw;
  width: 23.33vw;                           /* 448px（枠込み） */
}
.about-hero-photo--2 {                      /* Figma: 1287,322 */
  left: 67.03vw;
  top: 9.3vw;
  width: 23.33vw;
}
/* ★2026-08-07 車2台をFigmaの実測枠へ（案B）。旧値は黄=336px・赤=576px と大きすぎて、
   黄が左写真の人物に、赤が右写真に迫っていた。Figmaは黄 123.2,227.6,231.5 / 赤 1536.8,311,276.2
   （いずれもヒーロー左上を原点とした px。1920で割って vw 化）*/
.about-hero-car--1 {                        /* 黄色い車（左下・約-8°） */
  left: 6.417vw;                            /* 123.2px */
  top: 11.854vw;                            /* 227.6px */
  width: 12.057vw;                          /* 231.5px */
  transform: rotate(-8deg);
}
.about-hero-car--2 {                        /* 赤い車（右・約7°）。右端に少し見切れる */
  left: 80.04vw;                            /* 1536.8px */
  top: 16.198vw;                            /* 311px */
  width: 14.385vw;                          /* 276.2px */
  transform: rotate(7deg);
}
.about-hero-spark--1 {                      /* 赤い車の左上のキラキラ（Figma: 約-69°） */
  left: 78.54vw;                            /* 1508px（案B: 77.4→78.54）*/
  top: 16.807vw;                            /* 322.7px */
  width: 4.984vw;                           /* 95.7px */
  transform: rotate(-69deg);
}
.about-hero-spark--2 {                      /* 左写真の右上のキラキラ */
  left: 15.47vw;
  top: 10.72vw;
  width: 3vw;
}

/* ============================================================
   数字カード群（背景 #fdf8e2）
============================================================ */
.about-body {
  margin-top: clamp(16px, 1.6vw, 31px);    /* 矢印下端→背景境界（Figma 628）相当 */
  padding: clamp(40px, 4.64vw, 89px) 0 clamp(48px, 5.26vw, 101px);
  background-color: #fdf8e2;
}
.about-section {
  /* ★2026-08-27 1326→1560px（跡田さん選択＝案1）。カードが詰まって見えるのを直す。
     1440px画面で カード 351→409px。数字まわりの左右の余りが 11px→40px になる */
  width: min(1560px, calc(100% - 48px));
  margin: 0 auto;
}
.about-section + .about-section {
  margin-top: clamp(24px, 2.1vw, 40px);
}
/* PC ではカード群を 10% ×2 縮小（recruit / question / message と同じ 0.81） */
@media (min-width: 1025px) {
  .about-section {
    zoom: 0.81;
  }
}

.about-section-title {
  margin: 0 0 clamp(6px, 0.42vw, 8px);
  color: var(--ab-ink);
  font-size: clamp(2.2rem, 2.135vw, 4.1rem);   /* Figma 41px */
  letter-spacing: 0.05em;
  line-height: 1.65;
}

/* カードグリッド。Figma: 3列・列間17px・行間33px。
   position+z-index はカードの影プレート（::before z:-1）の受け皿：
   このコンテナを stacking context にすると、プレートは
   「カードの白背景の後ろ・セクション背景(#fdf8e2)の前」に正しく挟まる */
.about-cards {
  position: relative;
  z-index: 0;
  display: grid;
  /* ★2026-08-27 1fr は最小幅が auto なので、中身が取り分より広いとその列だけ広がる。
     実際 1920px で「2796」の4桁が効いて 会社の段が 323/323/400 とバラついた（跡田さん指摘）。
     minmax(0,1fr) にして、どの幅でも必ず3等分になるようにする */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* ★2026-08-27 列の間隔を 0.89vw→1.6vw（跡田さん選択＝案1）。
     1440px画面で 12.8px→23px。幅を広げるだけだと隙間は 12.8px のままで、
     カードが接して見える印象が残るため、隙間も一緒に広げる。行の間隔は据え置き */
  gap: clamp(20px, 1.72vw, 33px) clamp(16px, 1.6vw, 31px);
}
/* ★2026-08-18 12枚のカードの大きさを揃える（跡田さん選択＝案3）その1・幅。
   この段だけ Figma の設計値どおり 495fr/400fr/399fr で「設立」を広くしていたため、
   3段のなかでこの段だけカード幅が 403/326/325px とバラついていた（他の2段は一律351px）。
   他の2段と同じ等分にして、12枚すべて同じ幅にする。
   ・「設立」は403→351pxと52px狭くなるが、中身（月桂冠＋60周年）は276pxなので収まる
     （左右のゆとりは63px→37pxに減る）
   ・1024px以下は下のレスポンシブ指定が上書きするため、この行はPC専用として効く
   Figma の元の値に戻す場合は grid-template-columns: 495fr 400fr 399fr; */
.about-cards--company {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---- カード共通（白カード＋太グレー枠＋色付きの影プレート） ---- */
.about-card {
  position: relative;   /* ::before の位置基準（z-index は付けない＝自身を SC にしない） */
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(clamp(180px, 14.95vw, 287px) + var(--ab-bd-h));   /* Figma 287px ＋ 内訳ぶん */
  padding: clamp(10px, 1.04vw, 20px) clamp(12px, 1.3vw, 25px) clamp(10px, 1.09vw, 21px);
  background-color: #fff;
  border: clamp(5px, 0.52vw, 10px) solid var(--ab-gray);
  border-radius: clamp(20px, 2.084vw, 40px);  /* Figma 40px */
  box-sizing: border-box;
}
/* 色付きの影プレート（カードと同サイズを 13px 下へ）。
   z-index:-1 でカードの背面・セクション背景の前面に敷く */
.about-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(-1 * clamp(5px, 0.52vw, 10px));  /* border 込みの外形に合わせる */
  transform: translateY(clamp(8px, 0.69vw, 13px));
  background-color: var(--ab-accent, var(--ab-red));
  border: clamp(3px, 0.26vw, 5px) solid var(--ab-gray);
  border-radius: clamp(20px, 2.084vw, 40px);
  box-sizing: border-box;
}
.about-card--red    { --ab-accent: var(--ab-red);    --ab-num: var(--ab-red-num); }
/* ★2026-08-07 C-5: 数字の黄色 #ffcd53 は白地でコントラスト1.49しかなく読みにくい。
   縁取りも入っていない（実測 text-stroke 0px）。現状と #c08a00(3.05) の中間色に変更（跡田さん判断）。
   ★2026-08-07 数字を濃くしたぶん、同じカードの影プレート(::before)だけ元の黄色のままで
   浮いて見えるため、プレートも数字と同色に揃えた（跡田さん指示）。
   ヒーローの黄帯（--ab-yellow）は従来の #ffcd53 のまま */
.about-card--yellow { --ab-accent: #e0ac2a; --ab-num: #e0ac2a; }
.about-card--green  { --ab-accent: var(--ab-green);  --ab-num: var(--ab-green); }

/* 見出し行（タイトル＋小アイコン） */
.about-card-head {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.73vw, 14px);
  margin: 0;
  color: var(--ab-ink);
  font-size: clamp(1.7rem, 1.72vw, 3.3rem);   /* Figma 33px */
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-align: center;
}
.about-card-icon {
  height: clamp(28px, 2.9vw, 56px);
  width: auto;
}

/* 数字（中央・大） */
.about-card-num {
  flex: 1;
  display: flex;
  /* ★2026-08-17 数字・小数部・単位を同じ文字の下端（ベースライン）に揃える（跡田さん指摘）。
     旧 center は「18」「.1」「年」がそれぞれ別々に上下中央へ寄り、大きさが違う分だけ
     文字の下端がバラついていた。月桂冠だけは画像なので下の指定で中央のまま残す */
  align-items: baseline;
  justify-content: center;
  gap: clamp(6px, 0.63vw, 12px);
  color: var(--ab-num, var(--ab-red-num));
  line-height: 1;
}
.about-card-num-main {
  font-size: clamp(4.6rem, 6.875vw, 13.2rem); /* Figma 132px */
  line-height: 1;
}
.about-card-num-main--lg {
  /* ★2026-08-27 上限 14.8→12.4rem。カード群の幅は 1560px で止まるのに、数字は vw のまま
     育ち続けるため、1920px で「設立」の月桂冠と「2796」がカードの内側余白へ食い込んでいた
     （余り -7px / -4px）。カード幅が止まる画面幅(約1608px)での値 124px で頭打ちにする。
     1600px以下では 7.71vw のほうが小さいので、見た目は1pxも変わらない */
  font-size: clamp(5rem, 7.71vw, 12.4rem);    /* Figma 148px（設立・台数）→ 上限のみ変更 */
}
.about-card-num-sm {
  font-size: 0.69em;                          /* Figma 91/132 */
}
.about-card-unit {
  font-size: clamp(2rem, 2.552vw, 4.9rem);    /* Figma 49px */
  letter-spacing: 0.05em;
  line-height: 1.08;
}
.about-card-unit--stack {
  text-align: center;
  /* 「周/年」「億/円」は2行あり、下端で揃えると2行分まるごと数字より下へ垂れてしまう。
     見本どおり数字の高さの中に収める（跡田さんの指摘は1文字の単位＝%や人が対象）
     ★2026-08-18 この中央寄せは下の @supports ブロックで解除する（下記参照）*/
  align-self: center;
}

/* ★2026-08-18 「年」「円」と数字の下端を揃える（跡田さん選択＝案C）。
   これまでは単位を数字の高さの中央に置いていたため、数字が小さいカードほど
   単位が下へ垂れていた（実測 周年14px・億円22px）。
   揃え方は2通りあったが、跡田さんの指示は「単位を上げるのではなく数字を下げる」。
   そこで行全体を『単位の最終行のベースライン』基準に切り替え（align-items: last baseline）、
   そのままだとカードの下端まで落ちてしまうぶんを top で少しだけ戻す。
   戻す量は数字の文字サイズに比例させ（0.2倍）、PC・スマホとも同じ見え方になるようにした。
   ・単位の移動は 6〜7px に収まり、数字が 18〜27px 下りて下端が揃う
   ・副次効果として、3枚のカードで数字の高さも横一直線になる（従来は85.5だけ8px高かった）
   last baseline を解釈できない環境では上の baseline のまま＝従来の見た目に留める。
   top の戻しも道連れにしないよう、まとめて @supports の中に置いている */
@supports (align-items: last baseline) {
  /* ★2026-08-18 対象は「会社のこと」の3枚だけ（跡田さん指示）。
     当初これを .about-card-num 全体に当てたところ、「働く人のこと」6枚（%・人・年・歳・
     時間・日）の数字までカード内で 14〜18px 上へ動いてしまった。
     あちらは単位が1文字で元から下端が揃っており、直す必要がないカードだったため限定する。
     2行に積む単位（周年・億円）はこの段にしか無いので、この限定で過不足がない */
  .about-cards--company .about-card-num {
    align-items: last baseline;
    position: relative;
    top: calc(-0.2 * clamp(5rem, 7.71vw, 14.8rem));
  }
  /* 行の基準が変わったので、単位を中央に固定する必要がなくなる */
  .about-cards--company .about-card-unit--stack {
    align-self: auto;
  }
  /* ★2026-08-18 月桂冠だけは元のカード内位置に据え置く（跡田さん選択＝案1）。
     月桂冠は行の中で中央寄せ(align-self:center)なので、上の top で行ごと持ち上げると
     一緒に18px上がってしまい、「60」が冠の下へ突き出て見えていた（跡田さん指摘）。
     同じ量を逆向きに戻して、変更前と1pxも変わらない位置に固定する。
     ※これで「60」は冠のちょうど中央に来る（変更前は18px上寄り）。
       冠と数字の重なり方まで元どおりにする案2もあったが、跡田さんの選択は案1 */
  .about-cards--company .about-card-laurel {
    position: relative;
    top: calc(0.2 * clamp(5rem, 7.71vw, 14.8rem));
  }
}
/* 月桂冠（設立カードのみ・数字の左右） */
.about-card-laurel {
  /* ★2026-08-27 上限 206→172px。理由は上の --lg と同じ（カード幅が止まる約1608pxの値）*/
  height: clamp(110px, 10.73vw, 172px);
  width: auto;
  margin: 0 clamp(2px, 0.3vw, 6px);
  align-self: center;                        /* 数字のベースライン揃えの対象外にする */
}
/* ★2026-08-17 支給画像 icon-laurel.webp は「左枝」1本だけ（ピクセル解析: 中央が左へ膨らみ
   上下端が右＝ "(" の形）。これを左右そのまま2つ並べていたため、右側が裏返しに見えていた
   （跡田さん指摘「リーフが逆」）。右側だけ反転して冠の形にする */
.about-card-laurel:last-of-type {
  transform: scaleX(-1);
}

/* ★2026-08-27 内訳（年間販売台数の新車／中古車）。跡田さん指示で、大きい数字と注記のあいだに置く。
   主役は合計なので、注記(24px)より一段小さくして控えめにする。

   ■ 数字の高さを3枚で揃えるための仕掛け（跡田さん指摘「数字の位置はずらしたくない」）
   カードは縦のフレックスで、数字の箱(.about-card-num)が flex:1 で余りを全部吸う。
   そのため台数カードにだけ内訳を足すと、その箱だけ内訳のぶん縮んで数字が上へ寄り、
   3枚の数字の高さが揃わなくなる（実測で 44px ずれた）。
   そこで
     ・内訳の高さ --ab-bd-h を決め打ちし
     ・内訳を持たない他の2枚には、同じ高さの余白を数字の下に入れて流れを揃え
     ・カードの min-height も同じだけ増やして、数字が元の高さのまま留まるようにする
   これで3枚とも「見出し＋数字＋(内訳と同じ高さ)＋注記」と同じ構成になり、数字が揃う。 */
.about-card:not(.about-card--breakdown) .about-card-num {
  margin-bottom: var(--ab-bd-h);
}
.about-card-breakdown {
  margin: clamp(4px, 0.42vw, 8px) 0 0;
  padding: 0;
  list-style: none;
  color: var(--ab-text);
  font-size: clamp(1.2rem, 1.15vw, 2.2rem);
  letter-spacing: 0.03em;
  line-height: 1.5;
  text-align: left;   /* 台数の桁を左端で揃える。塊ごとカード中央に置かれる */
}

/* 注記（◯◯年時点） */
.about-card-note {
  margin: clamp(6px, 0.6vw, 12px) 0 0;
  color: var(--ab-text);
  font-size: clamp(1.3rem, 1.25vw, 2.4rem);   /* Figma 24px */
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-align: center;
}

/* ---- アンケートカード（緑・ランキング） ---- */
.about-card--green {
  min-height: calc(clamp(220px, 18.04vw, 346px) + var(--ab-bd-h));   /* Figma 346px ＋ 内訳ぶん */
}
.about-card-title {
  margin: 0;
  color: var(--ab-green);
  font-size: clamp(1.9rem, 1.98vw, 3.8rem);   /* Figma 38px */
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-align: center;
}
.about-card-rank {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(6px, 0.47vw, 9px);
  /* ★2026-08-18 ランキングをカード内で中央寄せ（跡田さん選択＝案B）。
     旧 width:100% では行がすべてカード左端(16px)から始まり、右に80〜190px空いて
     小見出しだけが中央に見えていた。幅を「3枚のなかで一番長い行」に合わせて固定し、
     親(.about-card)の align-items:center で中央へ寄せる。
     ・1枚の中では王冠と「1位」が縦にそろう（行ごと中央にすると階段状にずれる）
     ・3枚の左端も59/59/60pxとそろう（カードごとに最長行へ合わせると27pxずれる）
     ※幅を固定しているので、ランキングの文言が今より長くなったらこの値の調整が要る。
       min() で囲ってあるため、狭い画面ではカード幅を超えない */
  width: min(100%, clamp(230px, 19.9vw, 382px));
  margin: clamp(8px, 0.73vw, 14px) 0 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
.about-card-rank li {
  display: flex;
  align-items: flex-start;
  gap: clamp(4px, 0.31vw, 6px);
}
.about-card-crown {
  flex-shrink: 0;
  width: clamp(20px, 1.72vw, 33px);
  height: auto;
  margin-top: 0.15em;
}
.about-card-rank-no {
  flex-shrink: 0;
  width: 1.9em;
  color: var(--ab-green);
  font-size: clamp(1.7rem, 1.72vw, 3.3rem);   /* Figma 33px */
  line-height: 1.25;
}
.about-card-rank-tx {
  color: var(--ab-ink);
  font-size: clamp(1.7rem, 1.72vw, 3.3rem);
  letter-spacing: 0.01em;                     /* Figma は項目により 0.825〜1.65px */
  line-height: 1.25;
}
/* アンケートカードは左右の余白を詰めて1行に収める（Figma: 内側余白 約23px） */
.about-card--green {
  padding-left: clamp(10px, 0.83vw, 16px);
  padding-right: clamp(10px, 0.83vw, 16px);
}
/* PC はカード幅と文字が同率スケールのため、Figma どおり改行位置を固定できる
   （改行したい箇所は HTML の <br> で明示） */
@media (min-width: 1025px) {
  .about-card-rank-tx {
    white-space: nowrap;
  }
}

/* ============================================================
   ★2026-08-18 12枚のカードの大きさを揃える（跡田さん選択＝案3）その2・高さと中身
   ------------------------------------------------------------
   高さは指定ではなく「中身の量」で決まっていたため、段ごとに
   会社のこと223px / 働く人のこと178px / 社員アンケート214px とバラついていた。
   一番高い「会社のこと」（月桂冠が数字より背が高い）に合わせるしかないので、
   min-height をその高さ（19.1vw）に引き上げて3段とも同じにする。

   ただし高さを揃えるだけだと「働く人のこと」6枚は中身が増えないぶんスカスカになり、
   数字と注記のすき間が 7px → 52px まで開いてしまう（比較モックの案2）。
   そこで次の2つで中身を埋める。
     ・余った縦の空きを数字の下にためず、上下へ振り分ける（align-content: center）
     ・数字・見出し・単位を少しだけ大きくする
   数字の上限は「会社のこと」と同じ 7.71vw / 14.8rem まで。これを超えると
   働く人のことの数字が会社のことより大きくなり、ページの主従が逆転して見える。

   対象を1025px以上に限るのは、1024px以下では列の指定が切り替わって
   幅がすでに3段とも同じになっているため。
   ※スマホ・タブレットの高さ（390px幅で 200/200/240px）は今回は揃えていない。
============================================================ */
@media screen and (min-width: 1025px) {
  /* 3段とも一番高い「会社のこと」に合わせる。1920px超で中身が伸びなくなるのに合わせて上限も置く。
     ★2026-08-27 年間販売台数に内訳2行が入って「会社のこと」がさらに高くなったため、
     その分(--ab-bd-h)を足す。ここを足さないと、この段だけ中身に押されて高くなり
     3段の高さが 297/258/248 とバラつく（跡田さん指摘） */
  .about-card {
    /* ★2026-08-27 19.1→20.4vw（跡田さん指摘「小さくしていくと数値が真ん中から上に上がる」）。
       高さの伸び(19.1vw)が上限367pxに届くのは1921px。一方カードの幅は1608pxで止まるため、
       1608〜1920px の間だけ高さが伸び続け、その区間で数字が相対的に下がっていた。
       結果、1600px以下では数字がカード中心から -7.5%、1920pxでは -4.8% と見え方が変わっていた。
       係数を上げて上限に早く届かせ、どの幅でも 1920px と同じ -4.5% 前後に揃える */
    min-height: calc(clamp(196px, 20.4vw, 367px) + var(--ab-bd-h));
  }
  /* 働く人のこと（黄）＝ 中身が一番少なく、揃えると空きが出る段 */
  .about-card--yellow .about-card-num {
    /* 単一行のままでは align-content が効かないので折返しを許可し、行ごと上下中央へ。
       これで余った空きが数字の下だけに集まらず、上下に分かれる */
    flex-wrap: wrap;
    align-content: center;
  }
  .about-card--yellow .about-card-head {
    font-size: clamp(1.7rem, 1.95vw, 3.75rem);   /* 1.72vw から引上げ */
  }
  .about-card--yellow .about-card-num-main {
    font-size: clamp(4.6rem, 7.71vw, 14.8rem);   /* 会社のこと（--lg）と同じ上限まで */
  }
  .about-card--yellow .about-card-unit {
    font-size: clamp(2rem, 2.86vw, 5.5rem);      /* 2.552vw から引上げ */
  }
}

/* ============================================================
   レスポンシブ
============================================================ */
/* タブレット以下: カード2列 */
@media (max-width: 1024px) {
  .about-cards,
  .about-cards--company {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* ★2026-08-07 C-2: 3枚の段が2列になると最後の1枚が左に残り、右に大きな空白ができていた。
   最終行が1枚だけになったときに限って中央へ寄せる（跡田さん判断）。
   6枚の段は2列で割り切れるためこの指定に当たらない。
   ★2026-08-18 修正: これを max-width:1024px の中に置いていたため、1列になる767px以下でも
   発動し、3枚目だけ幅が半分（375px幅で実測158px）になっていた。
   中央寄せが要るのは「2列のとき」だけなので、2列の帯（768〜1024px）に限定する */
@media (min-width: 768px) and (max-width: 1024px) {
  .about-cards > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - clamp(12px, 0.89vw, 17px) / 2);
  }
}
/* スマホ: 1列。装飾はキラキラのみ非表示 */
@media (max-width: 767px) {
  /* ★2026-08-18 スマホのヒーローを案Aへ（跡田さん選択）。
     ------------------------------------------------------------
     旧実装（2026-08-07 C-1 案B）は、PCの座標をそのまま縮めるとリード文に重なるため
     スマホ専用に写真・車を置き直していた。しかしその座標が画面幅を超えており、
     黄色い車が左へ28px・赤い車が右へ53px見切れていた（デザイン担当の指摘）。

     案Aは「スマホ専用の置き直しをやめ、PCのレイアウトをそのまま縮める」方針。
     PCでは車が画面内に収まる設計（赤い車の右端が94.4vw）なので、
     同じ比率で縮めればはみ出しは起こらない。
     そのため、このブロックからヒーローの上書きを全部外している ──
     spark の display:none / band の height / photo と car の座標 /
     lead の padding / title-img の幅、いずれも指定しない。
     結果、基本ルール（vw 連動）がそのまま効く。

     390px幅での実測：車 53/61px・はみ出しなし・ヒーロー高293px。
     車が小さくなる点（157→53px）は跡田さんが承知のうえで選択。
     キラキラも PC と同じく表示される（旧実装では非表示にしていた）。

     ▼▼▼ 差し替え用に温存（ヒーローの他3案）▼▼▼
     どれかに変える場合は、下の該当ブロックをこの @media の中へ書き出す。
     数値はいずれも390px幅での実測付き。

     ★案B いまの配置のまま車だけ収める（車131/143px・ヒーロー425px）
     .about-hero-spark { display: none; }
     .about-hero-photo--1 { left: 2vw;  top: 1vw; width: 30vw; }
     .about-hero-photo--2 { left: 68vw; top: 1vw; width: 30vw; }
     .about-hero-car--1 { left: 2vw; top: auto; bottom: -1vw; width: 30vw; }
     .about-hero-car--2 { left: auto; right: 2vw; top: auto; bottom: -1vw; width: 34vw; }
     .about-hero-lead { padding-top: 14vw; padding-bottom: 26vw; }
     .about-hero-title-img { width: min(340px, 86vw); }

     ★案C 車2台を左右対称に整える（車140/138px・ヒーロー472px）
     .about-hero-spark { display: none; }
     .about-hero-photo--1 { left: 2vw;  top: 1vw; width: 30vw; }
     .about-hero-photo--2 { left: 68vw; top: 1vw; width: 30vw; }
     .about-hero-car--1 { left: 5vw; top: auto; bottom: 3vw; width: 33vw; transform: rotate(-6deg); }
     .about-hero-car--2 { left: auto; right: 5vw; top: auto; bottom: 3vw; width: 33vw; transform: rotate(6deg); }
     .about-hero-lead { padding-top: 14vw; padding-bottom: 34vw; }
     .about-hero-arrow { margin-top: 6vw; }
     .about-hero-title-img { width: min(340px, 86vw); }

     ★案D 写真も含めて配置し直す（車140/138px・写真の隠れ15px・ヒーロー509px）
     .about-hero-spark { display: none; }
     .about-hero-band { height: 30vw; }
     .about-hero-photo--1 { left: 3vw;  top: 2vw; width: 26vw; }
     .about-hero-photo--2 { left: auto; right: 3vw; top: 2vw; width: 26vw; }
     .about-hero-car--1 { left: 5vw; top: auto; bottom: 3vw; width: 33vw; transform: rotate(-6deg); }
     .about-hero-car--2 { left: auto; right: 5vw; top: auto; bottom: 3vw; width: 33vw; transform: rotate(6deg); }
     .about-hero-lead { padding-top: 14vw; padding-bottom: 34vw; }
     .about-hero-arrow { margin-top: 6vw; }
     .about-hero-title-img { width: min(340px, 86vw); }

     ★案E スマホでは車を出さない（はみ出しが構造的に起きない・ヒーロー408px）
     .about-hero-spark { display: none; }
     .about-hero-band { height: 32vw; }
     .about-hero-photo--1 { left: 3vw;  top: 2vw; width: 29vw; }
     .about-hero-photo--2 { left: auto; right: 3vw; top: 2vw; width: 29vw; }
     .about-hero-car { display: none; }
     .about-hero-lead { padding-top: 14vw; padding-bottom: 10vw; }
     .about-hero-title-img { width: min(340px, 86vw); }
     ▲▲▲ 温存ここまで ▲▲▲ */
  .about-cards,
  .about-cards--company {
    grid-template-columns: 1fr;
  }
  /* ★2026-08-18 スマホの「左右の余白」「文字の小ささ」への対応（跡田さん選択＝案1）。
     デザイン担当から2点の指摘があり、比較モックで4案を検証した結果、
     ・2列にするだけ（案2）＝ 月桂冠がカードから13pxはみ出し、見出しが12枚中7枚で2行になる
       月桂冠も数字も「カード幅」ではなく「画面幅」基準で大きさが決まるため、
       カードだけ半分にしても中身は縮まないのが理由
     ・2列＋中身を収める（案3）＝ 収めるために文字を小さくする必要があり、指摘②と逆行
     ・横並びに組み替え（案4）＝ 2点とも解決するが見た目の変化が大きい
     という結果になり、跡田さんの選択で「文字を大きくする」案1を採用した。

     この案で解決するのは指摘②（文字の小ささ）。
     指摘①（左右の余白）は 146→147px とほぼ変わらない。1列である以上、
     カードの箱だけが画面幅に広がって中身が取り残される構造は残るため。
     ①まで直す場合は案4（横並び）が必要で、その判断は保留になっている。

     PC の値は変えず、下限（clamp の最小値）だけを引き上げる方式。
     スマホでは vw の項が小さすぎて全項目が最小値に張りついているため、
     最小値を上げれば PC 側に影響を出さずにスマホだけ大きくできる。 */
  .about-card-head {
    font-size: clamp(2rem, 1.72vw, 3.3rem);        /* 17→20px */
  }
  .about-card-num-main {
    font-size: clamp(5.9rem, 6.875vw, 13.2rem);    /* 46→59px（売上高など）*/
  }
  .about-card-num-main--lg {
    font-size: clamp(6.4rem, 7.71vw, 14.8rem);     /* 50→64px（設立・台数）*/
  }
  .about-card-unit {
    font-size: clamp(2.6rem, 2.552vw, 4.9rem);     /* 20→26px */
  }
  .about-card-note {
    font-size: clamp(1.5rem, 1.25vw, 2.4rem);      /* 13→15px */
  }
  .about-card-rank-no,
  .about-card-rank-tx {
    font-size: clamp(1.9rem, 1.72vw, 3.3rem);      /* 17→19px */
  }
  /* 月桂冠は数字50pxに対して110pxと大きすぎ（Figmaの比率は1:1.4、実測は1:2.2）。
     数字を64pxに上げるのに合わせて80pxへ下げ、Figmaの比率に近づける */
  .about-card-laurel {
    height: 80px;
  }
  .about-card {
    /* 文字を大きくしたぶん中身が縦に伸びるので、最低の高さは下げて間延びを防ぐ。
       内側の余白は逆に広げ、文字がカードの縁に近づきすぎないようにする */
    padding: 16px 18px 14px;
    /* ★2026-08-27 年間販売台数の内訳ぶんを足す。足さないとこの1枚だけ高くなる
       （390pxで 217 対 196/201）。スマホは1列なので他の段との差は目立たないが、
       同じ段の中で高さが違うのは避ける */
    /* 170→178px。台数カードは内訳を入れると中身が 217px になり、170+内訳=210px を
       7px 超えてこの1枚だけ高くなるため、床を上げて同じ段の3枚を揃える */
    min-height: calc(178px + var(--ab-bd-h));
  }
  .about-card--green {
    min-height: calc(210px + var(--ab-bd-h));
  }
}