@charset "UTF-8";

/* ========================================
   index.css
   トップページ専用スタイル
   ※ Figma: node 54-64「Page / TOP」準拠（設計幅 PC 1920px）

   ■ スケールの考え方（--ipx）
     全セクションが全幅ブリード＋絶対配置コラージュのため、
     「Figma の 1px」= --ipx（100vw ÷ 1920）を定義し、寸法を
     calc(N * var(--ipx)) で書いて相似縮小する（company.css の --cpx と同じ流儀。
     全幅設計のため true-hold はせず常に画面幅連動）。
     ※ vw はスクロールバー幅を含むが .l-scroll の overflow-x:hidden が吸収する（既存ページと同じ）。

   ■ セクションの縦の重なり（Figma 実測）
     hero(1038) → 余白94 → about(1970.5)
     → business-wrap(2168・about に -289 重なる: 波が about の赤の上に乗る)
     → interview(1741・business に -367 重なる: 黄帯の上に波と INTERVIEW 文字)
     → environment(1196・interview 直後) → 余白101 → footer

   ■ SP（767px 以下）… ファイル末尾の @media ブロック
     XD/Figma に SP 版が無いため暫定：hero はポスターとして相似縮小のまま、
     テキストセクションは縦積み再構成・装飾非表示（about.php の前例に合わせる）。
     正式な SP デザイン支給後に差し替える。
======================================== */

.index {
  /* Figma 1px。他ページ(company 0.81〜0.897 等)に合わせ、コンテンツは 0.85 倍で描画する。
     背景(波・ベタ)は下の border-inline トリックで全幅ブリードを維持し、中身だけ中央寄せで縮小。

     ■ 余白優先（true-hold・案A/260731）:
       旧 85vw/1920 は「余白もコンテンツも一緒に比例縮小」だったが、これを company.css と同じ
       「まず左右余白を詰める→尽きたらコンテンツを縮小」に変更。
         = max(下限, min(0.85px, (100vw - 48px)/1920))
       ・上限 0.85px … 1920設計の保持値（1920units=1632px）。1920〜約1680pxは余白のみ縮小
         （左右余白 144px→24px、コンテンツは原寸1632pxを保持）。
       ・(100vw-48px)/1920 … 余白が最小48px(左右24px)に達した後のスケール。
       ・下限 0.5083px … 1024px(SP切替直前)時点の値で固定。1024px以下は末尾@mediaのSPレイアウトへ。*/
  --ipx: max(0.5083px, min(0.85px, calc((100vw - 48px) / 1920)));
  --idx-red: #F75959;                /* テーマ赤（business/environment） */
  --idx-blue: #55BAF5;
  --idx-green: #47D684;
  --idx-ink: #212121;
  --idx-ink2: #2C2C2C;
  --idx-cream: #FFFDF4;              /* = --color-bg */
  --idx-about-red: #ED5D5D;          /* about 波形の赤 */
  --idx-card-yellow: #FDE268;        /* about メインカード/message カード */
  --idx-biz-yellow: #FCD064;         /* business 背景/environment カード */
  background-color: var(--idx-cream);
  overflow: hidden;                  /* hero 右端のはみ出し等を全体でクリップ */
}

/* コンテンツ縮小の中央寄せ:
   絶対配置の基準(パディングボックス)を透明ボーダーで狭めて中央へ。
   背景は origin/clip を border-box にして従来どおり全幅ブリード。
   ※environment は width+margin:auto で自前センタリングのため対象外

   ★2026-08-24 幅を --ipx と連動させた（跡田さんFB「中央より右に寄って見える」）。
   この箱と --ipx は対になっている。旧 --ipx(85vw/1920)のときは設計座標の幅が
   ちょうど 85vw で、border 7.5vw×2 を除いた箱幅と一致していた。
   ところが 260731 に --ipx を「余白優先」の式へ変えたとき、相方の 7.5vw が
   旧式のまま残り、設計座標(1920×ipx)のほうが箱より広い状態になっていた。
   中身は箱の左端を起点に置くので、はみ出した分がすべて右側に出る＝全体が右へずれる。
   1920px では両者が偶然一致するため気づけなかった。
   実測(修正前→後): 1680px 右へ102px→0 / 1440px 84px→0 / 1160px 63px→0。
   ABOUT/BUSINESS/INTERVIEW の3セクションすべてで起きていた
   （ABOUT は右端の丸写真と車が画面外で切れていた）。
   1920px 以上では計算結果が 7.5vw と同値になるため見え方は変わらない。 */
.index-about,
.index-business-wrap,
.index-interview {
  border-inline: calc((100vw - 1920 * var(--ipx)) / 2) solid transparent;
  box-sizing: border-box;
  background-origin: border-box;
  background-clip: border-box;
}

/* ★2026-08-24 題字(ABOUT US / BUSINESS / INTERVIEW)を波線に沿わせるための入れ物。
   中身は index.js が作る（1文字ずつの span を、その時の波の形に合わせて置く）。
   座標はセクションのパディングボックス基準。元の題字画像は opacity:0 で残してある
   （読み上げ用の alt を保つため／JS が動かなければ従来どおり画像が出る）。
   スマホ(1024px以下)は題字が中央の水平配置のため対象外 */
.index-title-wave {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.index-title-wave span {
  position: absolute;
  display: block;
  font-family: "Dela Gothic One", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 400;
  line-height: 1;
  white-space: pre;
  -webkit-text-stroke-color: #1A1A1A;
  paint-order: stroke fill;
}

/* ---- 共通ボタン（白ピル＋黒矢印。about 系） ----
   ★2026-08-24 書体を Dela Gothic One → コーポレート・ロゴ ver2 Bold に変更（跡田さん選択・案B）。
   FB「太くて潰れて読みにくい」。Dela Gothic One は極太で フトコロが狭く、
   1440pxで18.1px・1024px以下で14px しかないため「会社」「談」「数」が塞がっていた。
   大きさは変えず書体だけを細くする案。サイトの見出しで既に使っている書体なので
   新しい書体は増えない。クラスは index.php 側で f-dela → f-corp-bold に付け替えた。
   ※「もっと見る」ピル(.index-viewmore)は 14.5px でさらに小さいが、
     今回の指示は ABOUT US のボタンのみのため据え置き（要判断） */
.index-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--ipx));
  width: calc(373 * var(--ipx));
  height: calc(56 * var(--ipx));
  background-color: #fff;
  border: 1px solid var(--idx-ink);
  border-radius: 999px;
  color: var(--idx-ink);
  font-size: calc(25 * var(--ipx));
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.index-btn:hover { opacity: 0.75; }
.index-btn-arrow { width: calc(48.8 * var(--ipx)); height: auto; }

/* ---- 共通 VIEW MORE ピル（店長/メッセージ/環境） ----
   ★2026-08-24 書体を Dela Gothic One → コーポレート・ロゴ ver2 Bold（跡田さん指示）。
   ABOUT US のボタン(.index-btn)を案Bで細くした際、こちらは 14.5px(1440px時)と
   さらに小さいのに極太のままで、同じ画面に2つの書体が混在していた。
   大きさは変えず書体だけを揃える。
   ※「採用情報を見る」(.index-environment-cta)は 43.5px と大きく、
     この大きさなら Dela Gothic One でも潰れないため、意匠としてそのまま残す */
.index-viewmore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(25 * var(--ipx));
  width: calc(307 * var(--ipx));
  height: calc(46 * var(--ipx));
  background-color: var(--idx-cream);
  border: 1px solid var(--idx-ink2);
  border-radius: calc(29 * var(--ipx)) / calc(23 * var(--ipx));
  color: var(--idx-ink);
  font-size: max(calc(20 * var(--ipx)), 11px);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.index-viewmore:hover { opacity: 0.75; }
.index-viewmore--env { background-color: #fff; }
.index-viewmore-arrow { width: calc(40.1 * var(--ipx)); height: auto; }

/* ============================================================
   Hero（新FV・4層）★2026-08-24 旧コラージュ(絶対配置25枚)から差し替え
   Figma「日産FV」: 7:5 上段 / 7:9 中段 / 7:11 下段
   ・下段エリア＝赤いコマ割りだけの版。これを背景として固定する
   ・上段と中段は「人物と車」だけが違う。ここだけを入れ替える
   ・タイトルは3エリアとも赤コマ左上から +316,+217 で完全一致（実測）
   ・％は 1560x854 のデザイン原寸に対する比率。幅が変わっても比率で追従する
============================================================ */
.index-fv {
  background-color: var(--idx-cream);
  margin-bottom: calc(94 * var(--ipx));
}
.index-fv-stage {
  position: relative;
  /* ★2026-08-24 1画面に収める（跡田さん指示「少し小さくしていい／1ページ綺麗に」）。
     幅いっぱいだと 1920px 幅で高さ1046pxになり、ヘッダーを除いた表示領域から
     はみ出してタイトルが切れていた。次の3つの小さいほうを採る:
       ① 画面幅いっぱい
       ② デザイン原寸 1560px（それ以上に引き伸ばさない）
       ③ ヘッダーを除いた高さに収まる幅（= 残り高さ × 1560/854）
     ③により、縦の短いウィンドウでも必ず1画面に収まる */
  --fv-gap: clamp(24px, 5vh, 64px);   /* 画面の底に接しないぶんの余白。下に続きがあることも伝わる */
  width: min(100%, 1560px, calc((100vh  - var(--header-h-now) - var(--fv-gap)) * 1560 / 854));
  width: min(100%, 1560px, calc((100dvh - var(--header-h-now) - var(--fv-gap)) * 1560 / 854));
  margin-inline: auto;
  aspect-ratio: 1560 / 854;   /* デザイン原寸 */
  overflow: hidden;
}
.index-fv-panels,
.index-fv-scene {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
/* ① 赤いコマ割り。固定 */
.index-fv-panels {
  left: 15.9615%; top: 20.3509%; width: 72.6282%;
  aspect-ratio: 1133 / 597;
  background-image: url(../../images/index/fv/fv-panels.webp);
}
/* ②③ 人物と車。ここだけが動く */
.index-fv-scene { will-change: opacity, transform; }
.index-fv-scene--1 {
  left: 1.9872%; top: 4.9123%; width: 96.8590%;
  aspect-ratio: 1511 / 729;
  background-image: url(../../images/index/fv/fv-scene1.webp);
  animation: idxFvOut 15s ease-in-out infinite;
}
.index-fv-scene--2 {
  left: 4.8077%; top: 7.6023%; width: 86.3462%;
  aspect-ratio: 1347 / 706;
  opacity: 0;
  animation: idxFvIn 15s ease-in-out infinite;
}
/* 2枚目は初回表示の邪魔をしないよう、読み込み完了後に読ませる（index.js が付与） */
.index-fv.is-ready .index-fv-scene--2 {
  background-image: url(../../images/index/fv/fv-scene2.webp);
}
/* ④ タイトル。固定 */
.index-fv-title {
  position: absolute;
  left: 36.2179%; top: 45.7310%; width: 57.6282%;
  margin: 0;
}
.index-fv-title img { display: block; width: 100%; height: auto; }

/* ふわっと（跡田さん選択）。1周15秒＝各シーン約6秒表示＋1.5秒で入れ替わる。
   base.css の prefers-reduced-motion で 0.01ms・1回に潰れるため、
   その場合は 100% の状態＝1枚目だけが出たまま静止する */
@keyframes idxFvOut {
  0%, 40%  { opacity: 1; transform: scale(1); }
  50%, 90% { opacity: 0; transform: scale(1.05); }
  100%     { opacity: 1; transform: scale(1); }
}
@keyframes idxFvIn {
  0%, 40%  { opacity: 0; transform: scale(0.95); }
  50%, 90% { opacity: 1; transform: scale(1); }
  100%     { opacity: 0; transform: scale(0.95); }
}

/* ============================================================
   ABOUT US（赤波形＋黄縁カード＋緑/青カード）
============================================================ */
.index-about {
  position: relative;
  height: calc(1970.5 * var(--ipx));
  /* 波形 SVG（#ED5D5D）＋ その下の赤ベタ。波と赤ベタは2px重ねて継ぎ目防止 */
  background-image:
    url(../../images/index/index-about-us-wave.svg),
    linear-gradient(var(--idx-about-red), var(--idx-about-red));
  /* 赤ベタは波SVGの下端に23px潜り込ませる（丸め誤差で1px幅の地色の筋が出るのを防ぐ。
     波SVG下部は全面赤塗りなので同色が重なるだけ） */
  background-position: 0 calc(127 * var(--ipx)), 0 calc(1150 * var(--ipx));
  background-size: 100% calc(1048 * var(--ipx)), 100% calc(821 * var(--ipx));
  background-repeat: no-repeat;
}
.index-about-heading {
  position: absolute;
  left: calc(145.2 * var(--ipx));
  top: 0;
  width: calc(903.3 * var(--ipx));
  margin: 0;
}
.index-about-heading img { display: block; width: 100%; height: auto; }
/* ※ ABOUT US の黒縁は 260728 に CSS drop-shadow で付けていたが、
   BUSINESS と同様「縁は画像に焼き込み」に統一する方針となったため撤去。
   縁入りの新 about-us.png 差し替え後、必要なら寸法を再計算する。 */

/* 黄縁メインカード（外黄＋内クリームの二重角丸） */
.index-about-main {
  position: absolute;
  left: calc(355 * var(--ipx));
  top: calc(342.5 * var(--ipx));
  width: calc(1210 * var(--ipx));
  height: calc(727 * var(--ipx));
  background-color: var(--idx-card-yellow);
  border: 2px solid var(--idx-ink2);
  border-radius: calc(140 * var(--ipx));
}
.index-about-main::before {
  content: "";
  position: absolute;
  inset: calc(14 * var(--ipx));
  background-color: var(--idx-cream);
  border: 2px solid var(--idx-ink2);
  border-radius: calc(130 * var(--ipx));
}
/* 和文見出しは他ページと同じ実テキスト＋黒縁取り（company.css「色文字見出しの黒縁取り(見本260722準拠)」方式）。
   画像化はヒーロー系レタリング(ABOUT US/INTERVIEW/BUSINESS/ENVIRONMENT英字)のみに限定する */
.index-about-catch {
  position: absolute;
  left: 0; right: 0;
  top: calc(157 * var(--ipx));
  margin: 0;
  text-align: center;
  font-size: calc(64.27 * var(--ipx));
  line-height: 1.24;
  color: #FDAF1C;
  -webkit-text-stroke: 0.04em #2B2C2C;
  paint-order: stroke fill;
}
.index-about-lead {
  position: absolute;
  left: 0; right: 0;
  top: calc(361.5 * var(--ipx));
  margin: 0;
  text-align: center;
  font-size: calc(25 * var(--ipx));
  line-height: 1.8;
  color: var(--idx-ink);
}
.index-about-main-btn {
  position: absolute;
  left: calc(421 * var(--ipx));
  top: calc(544 * var(--ipx));
}

/* 周辺装飾（写真丸・車・星など。回転は画像焼き込み済み） */
.index-about-deco { position: absolute; inset: 0; margin: 0; pointer-events: none; }
.iad { position: absolute; height: auto; }
/* ★2026-08-24 装飾7枚を削除（跡田さん指示）: blue-star / blue-surprise /
   green-arrow / green-kirakira / green-smile / green-star / yellow-kirakira。
   星・キラキラ・矢印・スマイルの小物。丸い面と車は残している。
   .iad-* は名前付きクラスで座標を当てているため、消しても残りの位置はずれない
   （nth-child で当てている環境リンクとは別の作り） */
.iad-yellow          { left: calc(256.3 * var(--ipx));  top: calc(258.5 * var(--ipx)); width: calc(284.2 * var(--ipx)); }
.iad-yellow-car      { left: calc(189.2 * var(--ipx));  top: calc(426.4 * var(--ipx)); width: calc(259.8 * var(--ipx)); }
.iad-green           { left: calc(1425.3 * var(--ipx)); top: calc(502.6 * var(--ipx)); width: calc(311.4 * var(--ipx)); }
.iad-green-car       { left: calc(1493.8 * var(--ipx)); top: calc(748.3 * var(--ipx)); width: calc(312.9 * var(--ipx)); }
.iad-blue            { left: calc(207 * var(--ipx));    top: calc(786 * var(--ipx));   width: calc(290.7 * var(--ipx)); }
.iad-blue-car        { left: calc(374.6 * var(--ipx));  top: calc(914 * var(--ipx));   width: calc(352.7 * var(--ipx)); }

/* 下段2カード（数字で見る北モ=緑 / 学生対談=青） */
.index-about-cards { position: absolute; inset: 0; pointer-events: none; }
.index-about-card {
  position: absolute;
  top: calc(1127.5 * var(--ipx));
  width: calc(595 * var(--ipx));
  height: calc(468 * var(--ipx));
  border: 2px solid var(--idx-ink2);
  border-radius: calc(120 * var(--ipx));
  pointer-events: auto;
}
.index-about-card::before {
  content: "";
  position: absolute;
  inset: calc(16 * var(--ipx));
  background-color: var(--idx-cream);
  border: 2px solid var(--idx-ink2);
  border-radius: calc(110 * var(--ipx));
}
.index-about-card--green { left: calc(355 * var(--ipx)); background-color: var(--idx-green); }
.index-about-card--blue  { left: calc(970 * var(--ipx)); background-color: var(--idx-blue); }
.index-about-card-title {
  position: absolute;
  left: 0; right: 0;
  top: calc(72 * var(--ipx));
  margin: 0;
  text-align: center;
  font-size: calc(60 * var(--ipx));
  line-height: 1.1;
  letter-spacing: 0.03em;
  -webkit-text-stroke: 0.04em var(--idx-ink2);
  paint-order: stroke fill;
}
.index-about-card--green .index-about-card-title { color: var(--idx-green); }
.index-about-card--blue  .index-about-card-title { color: var(--idx-blue); }
.index-about-card-text {
  position: absolute;
  left: 0; right: 0;
  top: calc(206 * var(--ipx));
  margin: 0;
  text-align: center;
  font-size: max(calc(20 * var(--ipx)), 11px);   /* PC帯下限(900px)でも11pxを確保 */
  line-height: 1.75;
  color: var(--idx-ink);
}
.index-about-card .index-btn {
  position: absolute;
  left: calc(172 * var(--ipx));
  top: calc(357 * var(--ipx));
  width: calc(252 * var(--ipx));
}

/* ============================================================
   BUSINESS + 店長に聞いてみた（黄背景1枚にまたがる）
============================================================ */
.index-business-wrap {
  position: relative;
  height: calc(2168 * var(--ipx));
  margin-top: calc(-289 * var(--ipx));   /* 波が about の赤ベタに重なる */
  /* 高さも --ipx 連動で縮小(横は全幅ブリード)。波の縦位置がコンテンツと同率で揃う。
     ※background ショートハンドは origin/clip をリセットするため、後から明示指定して
       透明ボーダー(中央寄せ用)の外まで塗る */
  background: url(../../images/index/index-business-bg.webp) top center / 100% calc(2168 * var(--ipx)) no-repeat;
  background-origin: border-box;
  background-clip: border-box;
}
.index-business-title {
  /* 題字画像。260728 差し替え: 旧 3240x480 → 新 2076x412（余白の少ないタイト crop）。
     文字自体の位置・大きさは据え置くため、新画像の ink-bbox から width/left/top を
     再計算した値（旧: left630 top84 width1080）。縁は表示 2px で ABOUT US と一致。 */
  position: absolute;
  left: calc(668.8 * var(--ipx));
  top: calc(52.2 * var(--ipx));
  width: calc(1038.2 * var(--ipx));
  margin: 0;
}
.index-business-title img { display: block; width: 100%; height: auto; }
/* ★2026-08-24 「仕事を知る」が1160〜1440pxで2行に折り返していた（跡田さん指示で修正）。
   真因は上の border-inline と同じ（箱が設計座標より狭く、left:1467 の右に文字ぶんの
   幅が残らなかった）ため、箱の修正だけでも折り返しは解消する。
   そのうえで基準を left:1467 から right に変えてある。Figma では見出しの右端が1687、
   リード文が1705 と18px ずれているが、実装では両方を1705に揃えた
   （縦に並ぶ2つの文字ブロックなので、右端が1本に通るほうが読みやすいという判断）。
   nowrap は保険（幅が足りなくなっても折り返さず、はみ出しで気づけるように） */
.index-business-catch {
  position: absolute;
  right: calc(215 * var(--ipx));
  top: calc(256 * var(--ipx));
  margin: 0;
  font-size: calc(40 * var(--ipx));
  letter-spacing: calc(4 * var(--ipx));
  white-space: nowrap;
  text-align: right;
  color: var(--idx-ink2);
}
.index-business-lead {
  position: absolute;
  right: calc(215 * var(--ipx));
  top: calc(334 * var(--ipx));        /* 322→334: 見出し「仕事を知る」との間隔を少し広げる（260731）*/
  margin: 0;
  text-align: right;
  font-size: calc(25 * var(--ipx));
  line-height: 2.2;                    /* 2→2.2: 行間を広げてゆとりを出す（260731）*/
  color: var(--idx-ink);
}
.index-business-cards { list-style: none; margin: 0; padding: 0; }
.index-business-card { position: absolute; width: calc(483.33 * var(--ipx)); }
.index-business-card--sales  { left: calc(215 * var(--ipx));     top: calc(472 * var(--ipx)); }
.index-business-card--tech   { left: calc(718.33 * var(--ipx));  top: calc(520 * var(--ipx)); }
.index-business-card--office { left: calc(1221.67 * var(--ipx)); top: calc(568 * var(--ipx)); }
.index-business-card > a { display: block; text-decoration: none; transition: opacity 0.2s ease; }
.index-business-card > a:hover { opacity: 0.85; }
.index-business-balloon {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 483.33 / 220;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/* ★2026-08-21 事務職のふきだしを他2枚と同じ 483.33/220 に統一（跡田さん指示）。
   アンバサダークルーの掲載取りやめで役割名が2行→1行になり、下に余白が残っていた。
   ふきだし画像そのものが縦長(967×532)だったため、絵柄を歪ませないよう
   中央の均一な帯から92px抜いて 967×440 に作り直した（上下の絵柄は1pxも変えていない）。
   これで比率の上書きが不要になり、役割名の位置も他2枚と同じ既定値でよくなった */
/* ★2026-08-24 職種名・役割名をまとめて 12 下げ、ふきだし内の上下の余白を揃えた
   （跡田さんFB「吹き出し内の上下の余白が統一されていないように見える」）。
   ふきだし画像の透明度を画素単位で走査して枠の内側(上32/440・下376/440)を求め、
   文字は行boxではなく実際に描かれているインク(canvas の字面メトリクス)で計測した。
   修正前は 上24.5 / 下49.5 と下が約2倍だった（3枚とも同じ。設計px）。
   35→47 / 104→116 で 上36.5 / 下37.5 になる。ベースラインは3枚とも元から同一で、
   カード間のズレではなく「1枚の中の上下」の問題だった。
   ※事務職だけ下が34.5 と 2 残る。260821 に作り直したふきだし画像の内側が
     他2枚より6px(画像座標)上にあるため。1枚だけ別値を当てる逃げは作らない。 */
.index-business-job {
  position: absolute;
  left: 0; right: 0;
  top: calc(47 * var(--ipx));
  text-align: center;
  font-size: calc(65 * var(--ipx));
  line-height: 1.18;
  letter-spacing: calc(3.25 * var(--ipx));
}
.index-business-role {
  position: absolute;
  left: 0; right: 0;
  top: calc(116 * var(--ipx));        /* 104→116: 職種名と同じ 12 ぶん下げる（上の注記参照・260824）*/
  padding: 0 calc(24 * var(--ipx));   /* 左右余白を確保（Web フォントが広く出るため枠に触れないよう）*/
  box-sizing: border-box;
  text-align: center;
  font-size: calc(31 * var(--ipx));   /* 35→31: 枠内に左右余白を作る（Figma準拠・260731）*/
  line-height: 1.3;
  letter-spacing: calc(0.5 * var(--ipx));  /* 1.75→0.5: 字間を詰めて枠から離す */
  color: var(--idx-ink);
}
.index-business-card--sales .index-business-job  { color: var(--idx-red); }
.index-business-card--tech .index-business-job   { color: var(--idx-blue); }
.index-business-card--office .index-business-job { color: var(--idx-green); }
.index-business-photo {
  display: block;
  width: calc(400 * var(--ipx));
  margin: calc(12 * var(--ipx)) auto 0;
}
.index-business-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 50%;
  border: 2px solid var(--idx-ink);   /* 黒縁（260730）。同セクションの事務職プレースホルダーと同一の太さ・色に統一 */
  box-sizing: border-box;
}
/* 事務職: 素材支給待ちのグレー円（Figma 準拠）。支給後に img へ差し替え */
.index-business-photo--placeholder {
  aspect-ratio: 1;
  background-color: #A8A8A8;
  border: 2px solid var(--idx-ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: calc(40 * var(--ipx));
  letter-spacing: calc(2 * var(--ipx));
}

/* ---- 店長に聞いてみた ---- */
.index-manager-card {
  position: absolute;
  left: calc(566.5 * var(--ipx));
  top: calc(1306.8 * var(--ipx));
  width: calc(960 * var(--ipx));
  height: calc(408 * var(--ipx));
  background-color: var(--idx-cream);
  border: 2px solid var(--idx-ink2);
  border-radius: calc(80 * var(--ipx));
  overflow: hidden;
}
.index-manager-photo {
  display: block;
  width: 100%;
  height: calc(266 * var(--ipx));
  object-fit: cover;
}
.index-manager-text {
  margin: calc(19 * var(--ipx)) calc(56 * var(--ipx)) 0;
  font-size: calc(25 * var(--ipx));
  line-height: 2;
  color: var(--idx-ink2);
}
/* ★2026-08-25 外枠を画像(webp)から SVG のパスに置き換えた（跡田さん指示「CSS化させたほうが
   自由が利く」）。しっぽの向きが画像に焼き込まれていたのを、数値で変えられるようにするため。
   サイトの他のふきだし（hearing/interview/know/question/company/job/cross-talk）は元から CSS。

   ■ 原画 index-business-tenntyou-balloon.webp(1003x601) を画素走査して採った値
     （原画は参照が無くなったので 260825 に削除した。必要なら git の履歴から取り出せる）
       本体 967x600 ／ 角丸 r=140 ／ 線の太さ 4 ／ 塗り #FFCD53 ／ 線 #2C2C2C
       しっぽの2辺（最小二乗・残差 0.009px の直線）
         上 x =  1.9192y +  101.45
         下 x = -1.9165y + 1903.28   → 交点(頂点) (1003, 469.75) ＝ 本体右辺から 36 出る
       ※原画の2辺はわずかに非対称。まるめずそのまま使っている。

   ■ なぜ三角形を貼る方式（サイトの他ページの二重三角）にしなかったか
       しっぽの下側の付け根 (y≒489) が右下の角丸の弧に刺さっている。
       弧の上に三角形を貼ると、本体の枠線を消すための当て物が本体の外へはみ出して破綻する
       （実際に試して破綻を確認した）。
       「角丸長方形 ∪ 三角形」を fill-rule:nonzero の1本のパスで塗れば、交点は自動で正しくなる。
       黒い層と、その 4px 内側の黄色い層の2枚重ね（直線は法線方向に 4＝b を 4*sqrt(1+a^2) 動かす）。

   ■ 確認
       原画と同じ 1003x601 で描いて画素比較 → 分類(線/塗り/外)の一致 100.0000%・食い違い 0画素。
       残る差はアンチエイリアスだけ（PSNR 36.5dB・平均差 0.7/765）。SVG のほうが輪郭は鮮明。
   ■ しっぽを動かすとき
       頂点 (1003,469.75) と、三角形の底辺 x=907 の2点を動かす。黄色い層も同じだけ動かすこと。
       下向きの版は、この形を頂点まわりに時計回り90度 回して作ってある（SP の指定は下段） */
.index-manager-balloon {
  position: absolute;
  left: calc(213.5 * var(--ipx));
  top: calc(1167.8 * var(--ipx));
  width: calc(501.33 * var(--ipx));
  aspect-ratio: 501.33 / 300.18;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1003 601'%3E%3Cpath fill='%232C2C2C' d='M140,0 H827 A140,140 0 0 1 967,140 V460 A140,140 0 0 1 827,600 H140 A140,140 0 0 1 0,460 V140 A140,140 0 0 1 140,0 Z M907,419.73 L1003,469.75 L907,519.84 Z'/%3E%3Cpath fill='%23FFCD53' d='M140,4 H827 A136,136 0 0 1 963,140 V460 A136,136 0 0 1 827,596 H140 A136,136 0 0 1 4,460 V140 A136,136 0 0 1 140,4 Z M907,424.24 L994.35,469.76 L907,515.33 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.index-manager-balloon-inner {
  /* 白窓は画像に含まれないため CSS で描く */
  position: absolute;
  left: calc(14.33 * var(--ipx));
  top: calc(14 * var(--ipx));
  width: calc(456.33 * var(--ipx));
  height: calc(273.18 * var(--ipx));
  background-color: var(--idx-cream);
  /* 内枠を外枠（PNG焼き込み・4px÷1003×要素幅）と同じ太さでスケールさせ、二重線を一致させる（260728）。
     PC は要素幅=501.33*ipx なので 501.33*4/1003 = 2.0 → calc(2*var(--ipx))。SP は下で上書き。 */
  border: calc(2 * var(--ipx)) solid var(--idx-ink2);
  border-radius: calc(60 * var(--ipx));
  box-sizing: border-box;
}
.index-manager-balloon-title {
  margin: calc(37.8 * var(--ipx)) 0 0 calc(40.5 * var(--ipx));
  font-size: calc(60 * var(--ipx));
  line-height: 1.17;
  letter-spacing: calc(3 * var(--ipx));
  color: #FFC538;
}
.index-manager-balloon-inner .index-viewmore {
  position: absolute;
  left: calc(74 * var(--ipx));
  top: calc(198.3 * var(--ipx));
}

/* ============================================================
   INTERVIEW（カルーセル）＋ MESSAGE
============================================================ */
.index-interview {
  position: relative;
  height: calc(1741 * var(--ipx));
  margin-top: calc(-367 * var(--ipx));   /* business の黄ベタに重なる（黄は business 背景を透かす） */
  /* 波形＋その下のクリームベタ（260728 修正: 波SVGを Figma 完全形 viewBox1040 に戻した）。
     波SVG自身が「波の上端→下のクリーム塗り」を連続して持つため、境界は常に波カーブ＝端の段差が出ない。
     波は viewBox1040 を 1040*ipx で描画（波振幅 128*ipx は従来と同じ）。上端 111*ipx、塗りは 1151*ipx まで。
     linear-gradient は SVG 塗りの下端(1151)より下だけを埋める（波の上には出さない＝段差の再発防止）。 */
  background-image:
    url(../../images/index/index-interview-wave.svg),
    linear-gradient(var(--idx-cream), var(--idx-cream));
  background-position: 0 calc(111 * var(--ipx)), 0 calc(1140 * var(--ipx));
  background-size: 100% calc(1040 * var(--ipx)), 100% calc(700 * var(--ipx));
  background-repeat: no-repeat;
}
.index-interview-letters {
  position: absolute;
  left: calc(145 * var(--ipx));   /* 190→172→145: タイトルをさらに左へ（案A・260731）*/
  top: calc(-57 * var(--ipx));    /* -45→-57: タイトルをほんの少し上へ（260728）*/
  width: calc(1045 * var(--ipx));
  height: auto;
}
.index-interview-heading { position: absolute; left: 0; right: 0; top: calc(219 * var(--ipx)); }
.index-interview-lead {
  margin: 0;
  text-align: center;
  font-size: calc(40 * var(--ipx));
  letter-spacing: 0.1em;
  color: var(--idx-ink2);
}
.index-interview-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: calc(52 * var(--ipx));
  margin-top: calc(6 * var(--ipx));
}
.index-interview-tire { width: calc(88 * var(--ipx)); height: auto; }
.index-interview-title { margin: calc(8 * var(--ipx)) 0 0; }
.index-interview-title img { display: block; width: calc(466 * var(--ipx)); height: auto; }

/* ---- カルーセル ---- */
.index-interview-carousel {
  position: absolute;
  left: 0; right: 0;
  top: calc(329 * var(--ipx));
  height: calc(761 * var(--ipx));
}
.index-interview-arrow {
  position: absolute;
  top: calc(322.5 * var(--ipx));
  width: calc(67 * var(--ipx));
  height: calc(67 * var(--ipx));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 3;
  transition: opacity 0.2s ease;
}
.index-interview-arrow:hover { opacity: 0.7; }
.index-interview-arrow img { display: block; width: 100%; height: auto; }
.index-interview-arrow--prev { left: calc(583.5 * var(--ipx)); }
.index-interview-arrow--next { left: calc(1268.5 * var(--ipx)); transform: scaleX(-1); }

.index-interview-track { list-style: none; margin: 0; padding: 0; }
/* ★2026-08-14 G-2: 現在地の点（index.js が生成）。PC は前後のカードが見えていて
   位置が分かるため出さない。スマホ幅だけ末尾の @media で表示する */
.index-interview-dots { display: none; }
/* スライド式: 全8枚を常時配置し、クラス切替で left/top/width/opacity をトランジション。
   スロット外のアイテムは画面外の待機位置(is-out-*)に透明で控え、そこから滑り込む */
.index-interview-item {
  display: block;
  position: absolute;
  transition: left 0.4s ease, top 0.4s ease, width 0.4s ease, opacity 0.4s ease;
}
.index-interview-item.is-out-left,
.index-interview-item.is-out-right {
  top: calc(142 * var(--ipx));
  width: calc(325 * var(--ipx));
  opacity: 0;
  pointer-events: none;
}
.index-interview-item.is-out-left  { left: calc(-380 * var(--ipx)); }
.index-interview-item.is-out-right { left: calc(1975 * var(--ipx)); }
.index-interview-item-link { display: block; text-decoration: none; }

/* 写真（楕円フレーム＋人物。比率は interview-index.css と同じ） */
.index-interview-item-photo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 491 / 388;
}
.index-interview-item-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.index-interview-item-frame--gray,
.index-interview-item-frame--grayline { display: none; }
.index-interview-item-frame--grayline {
  inset: calc(8 * var(--ipx));
  width: calc(100% - 16 * var(--ipx));
  height: calc(100% - 16 * var(--ipx));
}
.index-interview-item-clip {
  position: absolute;
  inset: 0;
  display: block;
  overflow: visible;
  /* テキストカード(z:2)より背面。人物のスーツ下端はカード上端で隠れる。
     ※260728: 一度 Figma 準拠で人物を前面(z:2)にしたが、森さん指示で
       「文章＋枠線の箱を最前面」に確定したため z:1 に戻した。
     カルーセル共通クラスなので中央に来たメンバー1〜8すべてに効く。 */
  z-index: 1;
}
.index-interview-item-person {
  position: absolute;
  left: 50%;
  top: -14.15%;
  transform: translateX(-50%);
  width: 93%;
  height: auto;
}

/* 中央（active）: 色楕円＋白カード */
.index-interview-item.is-active {
  display: block;
  left: calc(714.5 * var(--ipx));
  top: calc(88 * var(--ipx));
  width: calc(491 * var(--ipx));
  z-index: 2;
}
.index-interview-item-card {
  /* 中身はフロー配置（キャッチ2行で設計高285になり、3行なら下に伸びる）。
     固定座標にすると3行キャッチで区切り線・プロフィールに文字が重なるため */
  display: none;
  position: absolute;
  z-index: 2;                        /* 文章＋枠線の箱を最前面に（森さん指示・260728）。人物写真(clip z:1)より前面 */
  left: calc(18.5 * var(--ipx));
  top: calc(337 * var(--ipx));
  width: calc(449 * var(--ipx));
  min-height: calc(285 * var(--ipx));
  padding: calc(29 * var(--ipx)) calc(6.5 * var(--ipx)) calc(24 * var(--ipx));
  box-sizing: border-box;
  border-radius: calc(10 * var(--ipx));
}
.index-interview-item.is-active .index-interview-item-card { display: block; }
.index-interview-item-card--red   { background-color: var(--idx-red); }
.index-interview-item-card--blue  { background-color: var(--idx-blue); }
.index-interview-item-card--green { background-color: var(--idx-green); }
.index-interview-item-card::before {
  /* XD見本: 白カード＋細い色枠（約3px）。太い色帯にしない */
  content: "";
  position: absolute;
  inset: calc(3.5 * var(--ipx));
  background-color: #fff;
  border-radius: calc(7 * var(--ipx));
}
.index-interview-item-catch {
  position: relative;
  display: block;
  text-align: center;
  font-size: calc(40 * var(--ipx));
  line-height: 1.125;
  letter-spacing: 0.05em;
  color: var(--idx-ink);
}
/* 3行キャッチ（整備士2名）は一段縮小して枠内に収める */
.index-interview-item-card--long .index-interview-item-catch {
  font-size: calc(30 * var(--ipx));
  line-height: calc(35 / 30);
}
.index-interview-item-divider {
  position: relative;
  display: block;
  width: 100%;
  height: calc(3 * var(--ipx));
  margin: calc(23 * var(--ipx)) auto calc(17 * var(--ipx));
  border-radius: 999px;
}
.index-interview-item-card--red .index-interview-item-divider   { background-color: var(--idx-red); }
.index-interview-item-card--blue .index-interview-item-divider  { background-color: var(--idx-blue); }
.index-interview-item-card--green .index-interview-item-divider { background-color: var(--idx-green); }
.index-interview-item-profile {
  position: relative;
  display: block;
  margin-left: calc(20.5 * var(--ipx));
  font-size: max(calc(22 * var(--ipx)), 11px);
  line-height: calc(34 / 22);
  color: var(--idx-ink);
}

/* 側面（prev/next）: 灰楕円＋素テキスト */
.index-interview-item.is-prev,
.index-interview-item.is-next {
  display: block;
  width: calc(325 * var(--ipx));
  opacity: 0.7;
  z-index: 1;
}
.index-interview-item.is-prev { left: calc(226 * var(--ipx));  top: calc(141 * var(--ipx)); }
.index-interview-item.is-next { left: calc(1360 * var(--ipx)); top: calc(142 * var(--ipx)); }
/* 側面は人物を小さめに（XD見本: 灰楕円と白破線が人物の周囲にしっかり見える比率） */
.index-interview-item.is-prev .index-interview-item-person,
.index-interview-item.is-next .index-interview-item-person {
  width: 76%;
  top: -6%;
}
.index-interview-item.is-prev .index-interview-item-frame--color,
.index-interview-item.is-next .index-interview-item-frame--color { display: none; }
.index-interview-item.is-prev .index-interview-item-frame--gray,
.index-interview-item.is-next .index-interview-item-frame--gray,
.index-interview-item.is-prev .index-interview-item-frame--grayline,
.index-interview-item.is-next .index-interview-item-frame--grayline { display: block; }
.index-interview-item-side { display: none; }
.index-interview-item.is-prev .index-interview-item-side,
.index-interview-item.is-next .index-interview-item-side { display: block; margin-top: calc(23 * var(--ipx)); }
.index-interview-item-side-catch {
  display: block;
  width: max-content;          /* 楕円幅(325)より長い行も <br> 位置どおりに保つ（XD準拠） */
  margin-inline: auto;
  white-space: nowrap;
  text-align: center;
  font-size: calc(30 * var(--ipx));
  line-height: calc(35 / 30);
  letter-spacing: 0.05em;
  color: #5F5F5F;
  -webkit-text-stroke: calc(6 * var(--ipx)) #fff;   /* XD: 白フチで地から浮かせる */
  paint-order: stroke fill;
}
.index-interview-item-side-profile {
  display: block;
  margin: calc(22 * var(--ipx)) 0 0 calc(16 * var(--ipx));
  font-size: max(calc(22 * var(--ipx)), 11px);
  line-height: calc(34 / 22);
  color: #5F5F5F;
}

/* ---- MESSAGE（代表メッセージ） ---- */
.index-message {
  position: absolute;
  left: calc(215 * var(--ipx));
  top: calc(1104 * var(--ipx));
  width: calc(1490 * var(--ipx));
  height: calc(549 * var(--ipx));
}
.index-message-card {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--idx-card-yellow);
  border: 2px solid var(--idx-ink2);
  border-radius: calc(140 * var(--ipx));
  overflow: hidden;   /* 写真を角丸カード内にクリップ＝黄色フレームより後ろに潜り込ませる（260731）*/
}
.index-message-card::before {
  content: "";
  position: absolute;
  inset: calc(16 * var(--ipx));
  background-color: var(--idx-cream);
  border: 2px solid var(--idx-ink2);
  border-radius: calc(130 * var(--ipx));
}
.index-message-photo {
  position: absolute;
  /* ★2026-08-01 社長メッセージ写真の修正(森さん依頼)→★08-02 左位置を784へ訂正:
     ・XDをピクセル解析で再実測した結果、カード=x215/幅1490・写真左=784 で【Figmaと完全一致】
       (Figma 54:1883: x999-215=784, 691×516)。08-01の「XD実測56%=842」はスクショ切り出しの
       座標換算ミスで、跡田さんの指摘(Web が XD/Figma 両方と違う)により発覚・撤回
     ・写真は内側キーライン(黒線)の内側に収まり、上下右は黄フレーム+黒線が写真の前に通る
       (旧 top/right/bottom:0 では写真がカード縁まで達しフレームを覆っていた→この修正は維持)
     ・784 + 内側インセットで写真ボックス≒691×516 = 画像原寸(クロップほぼゼロの設計) */
  left: calc(784 * var(--ipx));
  top: calc(16 * var(--ipx) + 2px);
  /* imgは置換要素のため right/bottom + auto では伸びない(固有寸法になる)。%とcalcで明示 */
  width: calc(100% - 784 * var(--ipx) - (16 * var(--ipx) + 2px));
  height: calc(100% - 2 * (16 * var(--ipx) + 2px));
  border-radius: 0 calc(128 * var(--ipx)) calc(128 * var(--ipx)) 0;
  object-fit: cover;
  object-position: 100% 12%;
}
.index-message-en {
  position: absolute;
  left: calc(130 * var(--ipx));
  top: calc(84 * var(--ipx));
  margin: 0;
  font-size: calc(40 * var(--ipx));
  color: #FFA3A3;
}
.index-message-title {
  position: absolute;
  left: calc(130 * var(--ipx));
  top: calc(157 * var(--ipx));
  margin: 0;
  font-size: calc(70 * var(--ipx));
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--idx-red);
  -webkit-text-stroke: 0.04em var(--idx-ink2);
  paint-order: stroke fill;
}
.index-message-text {
  position: absolute;
  left: calc(130 * var(--ipx));
  top: calc(268 * var(--ipx));
  margin: 0;
  font-size: calc(25 * var(--ipx));
  line-height: calc(43 / 25);
  color: var(--idx-ink);
}
.index-message-cta {
  position: absolute;
  left: calc(430 * var(--ipx));
  top: calc(437 * var(--ipx));
}

/* ============================================================
   ENVIRONMENT（黄角丸カード。波形なし）
============================================================ */
.index-environment {
  position: relative;
  width: calc(1700 * var(--ipx));
  height: calc(1196 * var(--ipx));
  margin: 0 auto calc(101 * var(--ipx));
  background-color: var(--idx-biz-yellow);
  border-radius: calc(120 * var(--ipx));
}
.index-environment-title {
  /* 題字はXD切出し(実測 x240 y55 w1390)。Figma書き出しは細線フォールバックだったため */
  position: absolute;
  left: calc(240 * var(--ipx));
  top: calc(55 * var(--ipx));
  width: calc(1390 * var(--ipx));
  margin: 0;
}
.index-environment-title img { display: block; width: 100%; height: auto; }
.index-environment-subtitle {
  position: absolute;
  left: 0; right: 0;
  top: calc(224.3 * var(--ipx));
  margin: 0;
  text-align: center;
  font-size: calc(40 * var(--ipx));
  letter-spacing: calc(4 * var(--ipx));
  color: var(--idx-ink2);
}
.index-environment-panel {
  position: absolute;
  left: calc(105 * var(--ipx));
  top: calc(342.3 * var(--ipx));
  width: calc(1490 * var(--ipx));
  height: calc(446.3 * var(--ipx));
  background-color: var(--idx-red);
  border: 2px solid var(--idx-ink2);
  border-radius: calc(140 * var(--ipx));
}
.index-environment-panel::before {
  content: "";
  position: absolute;
  inset: calc(16 * var(--ipx));
  background-color: var(--idx-cream);
  border: 2px solid var(--idx-ink2);
  border-radius: calc(130 * var(--ipx));
}
.index-environment-panel-title {
  position: absolute;
  left: 0; right: 0;
  top: calc(90 * var(--ipx));
  margin: 0;
  text-align: center;
  font-size: calc(66 * var(--ipx));
  line-height: 1.1;
  letter-spacing: 0.03em;
  color: var(--idx-red);
  -webkit-text-stroke: 0.04em var(--idx-ink2);
  paint-order: stroke fill;
}
.index-environment-panel-text {
  position: absolute;
  left: 0; right: 0;
  top: calc(209.4 * var(--ipx));
  margin: 0;
  text-align: center;
  font-size: calc(25 * var(--ipx));
  line-height: 2;
  color: var(--idx-ink);
}
.index-environment-panel .index-viewmore {
  position: absolute;
  left: calc(591 * var(--ipx));
  top: calc(339.4 * var(--ipx));
}
/* 写真＋装飾（パネルの上下辺を跨ぐため overflow は切らない） */
.index-environment-photo,
.index-environment-deco { position: absolute; inset: 0; pointer-events: none; }
.index-environment-photo img,
.index-environment-deco img { position: absolute; height: auto; }
.index-environment-photo-back     { left: calc(128 * var(--ipx));    top: calc(305.7 * var(--ipx)); width: calc(240 * var(--ipx)); }
.index-environment-photo-img      { left: calc(134 * var(--ipx));    top: calc(294.7 * var(--ipx)); width: calc(240 * var(--ipx));
  border-radius: 50%; border: 2px solid var(--idx-ink); box-sizing: border-box; }  /* 黒縁（260730）。BUSINESS丸写真と同一の太さ・色で全周に */
.index-environment-photo-kirakira { left: calc(323.8 * var(--ipx));  top: calc(305.1 * var(--ipx)); width: calc(44.2 * var(--ipx)); }
.index-environment-car            { left: calc(1311 * var(--ipx));   top: calc(646.3 * var(--ipx)); width: calc(255.7 * var(--ipx)); }
.index-environment-triangle       { left: calc(1305.9 * var(--ipx)); top: calc(667.3 * var(--ipx)); width: calc(49.9 * var(--ipx)); }
.index-environment-star           { left: calc(1527.7 * var(--ipx)); top: calc(599.1 * var(--ipx)); width: calc(94.2 * var(--ipx)); } /* 回転は画像焼き込み済み */

/* ★2026-08-24 2項目を中央に揃える（跡田さんFB「左寄りのため」）。
   経緯: 2026-08-03 に「福利厚生」(押せない飾り)を削除して3項目→2項目になった際、
   デザイン上の3枠(263.7 / 640 / 1022.9)のうち左寄りの2枠をそのまま使っていた。
   そのため右端が空き、2つ合わせた中心がセクション中心より左にずれていた
   （1440pxで中心474px。セクション中心は616pxなので142pxのずれ）。
   1項目ずつ座標を打つのをやめ、リスト自体を中央に置いて横並びにする。
   こうすると項目数や文字数が変わっても中央のまま保たれる。
   間隔の 73 は、変更前の見た目の間隔（1440pxで53px）をデザイン単位に戻した値 */
.index-environment-links {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: calc(850.2 * var(--ipx));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: calc(73 * var(--ipx));
  white-space: nowrap;
}
.index-environment-links a {
  display: flex;
  align-items: center;
  gap: calc(15 * var(--ipx));
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.index-environment-links a:hover { opacity: 0.75; }
.index-environment-links-label {
  font-size: calc(52 * var(--ipx));
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: var(--idx-red);
  -webkit-text-stroke: 0.04em var(--idx-ink);
  paint-order: stroke fill;
}
.index-environment-links-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(72 * var(--ipx));
  height: calc(72 * var(--ipx));
  background-color: var(--idx-ink);
  border-radius: 50%;
}
.index-environment-links-circle img { width: calc(45 * var(--ipx)); height: auto; }

.index-environment-cta {
  position: absolute;
  left: calc(538 * var(--ipx));
  top: calc(984.7 * var(--ipx));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(40 * var(--ipx));
  width: calc(650 * var(--ipx));
  height: calc(111 * var(--ipx));
  background-color: var(--idx-red);
  border: 1px solid var(--idx-ink);
  border-radius: 999px;
  color: #fff;
  font-size: calc(60 * var(--ipx));
  letter-spacing: calc(3 * var(--ipx));
  line-height: 1;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.index-environment-cta:hover { opacity: 0.85; }
.index-environment-cta-wo { font-size: calc(55 * var(--ipx)); }
.index-environment-cta img { width: calc(95.8 * var(--ipx)); height: auto; }

/* ============================================================
   SP（1024px 以下）: 暫定の縦積み再構成。
   XD/Figma に SP 版が無いため、hero はポスター縮小のまま、
   テキストセクションは固定 px の読めるサイズで再構成し装飾は非表示。
   切替を 1024px にする理由: PC帯はコンテンツ 0.85 縮小のため、
   1025px 時点で本文が約 11px（他ページの下限と同水準）になる。
   正式な SP デザイン支給後に置き換える。
============================================================ */
@media (max-width: 1024px) {

  /* SP はコンテンツ縮小・中央寄せを解除（全幅の縦積みレイアウト） */
  .index { --ipx: calc(100vw / 1920); }
  .index-about,
  .index-business-wrap,
  .index-interview { border-inline: 0; }

  /* ---- 共通ボタン: 流し込みサイズへ ---- */
  .index-btn { position: relative; inset: auto; width: fit-content; height: 40px; padding: 0 24px; font-size: 14px; gap: 8px; margin: 18px auto 0; }
  .index-btn-arrow { width: 28px; }
  .index-viewmore { position: relative; inset: auto; width: 200px; height: 36px; font-size: 12px; gap: 14px; margin: 14px auto 0; }
  .index-viewmore-arrow { width: 26px; }

  /* ---- ABOUT ---- */
  .index-about {
    height: auto;
    padding-bottom: 40px;
    background-image:
      url(../../images/index/index-about-us-wave.svg),
      linear-gradient(var(--idx-about-red), var(--idx-about-red));
    /* 波は見出し(高さ約110px)の下から。赤ベタは波下部に潜り込ませて継ぎ目防止 */
    background-position: 0 100px, 0 240px;
    background-size: 100% 160px, 100% calc(100% - 240px);
    background-repeat: no-repeat;
  }
  .index-about-heading { position: relative; inset: auto; width: min(78vw, 420px); margin: 0 auto; padding-top: 4px; }
  .index-about-main {
    position: relative;   /* static にすると ::before(inset)が祖先基準になり全体を覆う */
    inset: auto;
    width: auto;
    height: auto;
    margin: 56px 16px 0;
    padding: 26px 12px 30px;
    border-radius: 36px;
  }
  .index-about-main::before { inset: 8px; border-radius: 30px; }
  .index-about-main > * { position: relative; z-index: 1; }
  .index-about-catch { position: relative; inset: auto; font-size: clamp(19px, 5.6vw, 26px); }
  .index-about-lead { position: relative; inset: auto; margin-top: 14px; font-size: 13px; line-height: 1.9; }
  .index-about-main-btn { position: relative; inset: auto; }
  .index-about-deco { display: none; }
  .index-about-cards { position: relative; inset: auto; display: flex; flex-direction: column; gap: 20px; margin: 24px 16px 0; }
  .index-about-card {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    padding: 22px 12px 26px;
    border-radius: 36px;
  }
  .index-about-card::before { inset: 8px; border-radius: 30px; }
  .index-about-card > * { position: relative; z-index: 1; }
  .index-about-card-title { position: relative; inset: auto; font-size: clamp(22px, 6.4vw, 30px); }
  .index-about-card-text { position: relative; inset: auto; margin-top: 12px; font-size: 13px; line-height: 1.8; }
  .index-about-card .index-btn { position: relative; inset: auto; width: fit-content; }

  /* ---- BUSINESS ---- */
  .index-business-wrap {
    height: auto;
    margin-top: 0;
    /* ★2026-08-02 SPにも赤→黄の波(曲線)を実装(森さん依頼「波の調整」・跡田さん選択)。
       PC用背景PNG(1920×2168・上188pxが透過の曲線)を幅100%で流用し、
       曲線の透過部分の背後に赤(ABOUTと同色)を敷いて「赤が曲線で黄に切り替わる」を再現。
       曲線の実表示高さ=188/1920=9.79vw。コンテンツはその下から開始 */
    padding: calc(9.79vw + 28px) 0 48px;
    background:
      url(../../images/index/index-business-bg.webp) top center / 100% auto no-repeat,
      linear-gradient(var(--idx-about-red), var(--idx-about-red)) top center / 100% calc(9.79vw + 2px) no-repeat,
      var(--idx-biz-yellow);
  }
  .index-business-title { position: relative; inset: auto; width: min(59.6vw, 327px); margin: 0 auto; }  /* 260728 新画像(2076x412)で文字表示幅を旧と一致させた値 */
  .index-business-catch { position: relative; inset: auto; margin-top: 18px; text-align: center; font-size: 19px; letter-spacing: 2px; }
  .index-business-lead { position: relative; inset: auto; margin-top: 8px; padding: 0 20px; text-align: center; font-size: 13px; line-height: 1.9; }
  /* ★2026-08-02 SPはPC用固定改行を無効化し自然折返しに(「に、」だけの行が孤立していた。
     職種紹介の仕事内容と同じ手法・森さん依頼「indexのレスポンシブ」タスク03) */
  .index-business-lead br { display: none; }
  .index-business-cards { display: flex; flex-direction: column; gap: 26px; margin-top: 26px; }
  .index-business-card { position: relative; inset: auto; width: min(84vw, 360px); margin: 0 auto; }
  /* ★2026-08-24 SPも PC と同じ理由で 9% ぶん下げ、ふきだし内の上下の余白を揃えた
     （15%/46% のときは 上15.7 / 下45.7 と下が約3倍。430/375/320px 実測）。
     SPは箱に対する % 指定なので、PC側の 47/116（設計px）とは別に持つ必要がある */
  .index-business-job { top: 24%; font-size: clamp(26px, 8vw, 34px); letter-spacing: 1.5px; }
  .index-business-role { top: 55%; font-size: clamp(13px, 3.9vw, 17px); letter-spacing: 1px; }
  .index-business-photo { width: 66%; max-width: 280px; margin-top: 6px; }
  .index-business-photo--placeholder { font-size: 20px; letter-spacing: 1px; }

  .index-manager { display: flex; flex-direction: column-reverse; padding: 40px 16px 0; }
  .index-manager-card { position: relative; inset: auto; width: auto; height: auto; border-radius: 24px; padding-bottom: 14px; }
  .index-manager-photo { height: auto; aspect-ratio: 960 / 266; }
  .index-manager-text { margin: 10px 16px 0; font-size: 12.5px; line-height: 1.8; }
  /* ★2026-08-25 SPは写真カードが下に来る（column-reverse）のに、しっぽが右＝何もない方を
     向いていた（跡田さん指摘）。外枠を SVG にしたので下向きの版に差し替える。
     下向きは同じ形を頂点まわりに時計回り90度 回したもの。
       右向き viewBox 0 0 1003 601（本体 967x600 ＋ 右へ 36）
       下向き viewBox 0 0  967 637（本体 967x600 ＋ 下へ 36）
     要素幅が指す単位が 1003→967 に変わるので、本体は 3.7% 大きく描かれる（390pxで271→281px）。
     内枠の % も単位が変わるぶん読み替える: 左右 ×1003/967 ／ 上下 ×601/637 */
  .index-manager-balloon {
    position: relative; inset: auto; width: min(72vw, 320px); margin: 0 auto 14px;
    aspect-ratio: 967 / 637;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 967 637'%3E%3Cpath fill='%232C2C2C' d='M140,0 H827 A140,140 0 0 1 967,140 V460 A140,140 0 0 1 827,600 H140 A140,140 0 0 1 0,460 V140 A140,140 0 0 1 140,0 Z M533.52,540 L483.5,636 L433.41,540 Z'/%3E%3Cpath fill='%23FFCD53' d='M140,4 H827 A136,136 0 0 1 963,140 V460 A136,136 0 0 1 827,596 H140 A136,136 0 0 1 4,460 V140 A136,136 0 0 1 140,4 Z M529.01,540 L483.5,627.35 L437.92,540 Z'/%3E%3C/svg%3E");
  }
  .index-manager-balloon-inner { left: 3.008%; top: 4.434%; width: 94.393%; height: 85.856%; border-radius: 26px; border-width: min(0.2872vw, 1.276px); }  /* 外枠(×4/967)に一致させる（260728 の値を 260825 の単位変更に合わせて読み替え） */
  /* ★2026-08-25 中身をPCと同じ比率に（跡田さん選択＝案A）。
     旧 clamp/固定px はふきだしの幅と連動しておらず、中身だけが痩せて右下に空白が残っていた。
     内枠 = 要素幅 × 0.9439。PC比 見出し13.1% → 0.131×0.9439 = 0.1236 × 要素幅。
     ボタン下の余白 10.1% ＝ 高さ32px が内枠(158.9px@390)の20.1% なので top = 69.8% */
  .index-manager-balloon-title { margin: 8.6% 0 0 10%; font-size: calc(0.1236 * min(72vw, 320px)); letter-spacing: 0.05em; }
  /* 幅は内枠に連動させる（PC比 67.3%）。旧 min-width:150px はふきだしが縮んでも効いてしまい、
     狭い幅で比率が崩れていたので外した。高さ32px は指で押せる大きさなので据え置き */
  .index-manager-balloon-inner .index-viewmore { position: absolute; left: 15%; top: 69.8%; width: 67.3%; height: 32px; margin: 0; }

  /* ---- INTERVIEW ---- */
  /* ★2026-08-02 SPにも黄→クリームの波を実装(森さん依頼「波の調整」)。
     跡田さん指摘「PCはINTERVIEW文字が波に合わせてある。SPも同じに」を受け、
     PC構図の完全ミニチュアで再現 — 文字の相対幅(1045/1922=54.4%)・左位置(145/1922=7.54vw)・
     波の振幅(128/1922=6.66vw)・文字と波の重なり(文字top=波開始-8.74vw)を全てPC比率で統一。
     これで文字のアーチと波のうねりが一体に見える(振幅もPC同比率なので自然な緩やかさ)。
     ※見出しはpadding-topで下げる(margin-topだと相殺で効かない) */
  .index-interview {
    position: relative;
    height: auto;
    margin-top: 0;
    padding-top: calc(10vw + 6.66vw + 38px); /* ★2026-08-03 波の下の余白を+14px(つめつめ解消・案B) */
    padding-bottom: 40px;
    background:
      url(../../images/index/index-interview-wave.svg) 0 10vw / 100% 54.11vw no-repeat,
      linear-gradient(var(--idx-biz-yellow), var(--idx-biz-yellow)) top center / 100% calc(10vw + 6.66vw + 2px) no-repeat,
      var(--idx-cream);
  }
  .index-interview-letters {
    position: absolute;
    inset: auto;
    left: 7.54vw;
    top: calc(10vw - 8.74vw);
    display: block;
    width: 54.4vw;
    margin: 0;
  }
  /* ★2026-08-03 跡田さん指摘「見出しまわりがつめつめ」への対応(案B+案②)。
     ・見出しと写真の間を 16px→40px、波の下も広げて窮屈さを解消
     ・一方「人を知る」と「社員インタビュー」は一つの見出しとして近づける
     ※行間は margin だけでは詰まらない(ピクセル実測で判明)。文字同士の実距離は
       margin + 行送りの余り(約11px) + 見出し行の内部オフセット(6px) の合算なので、
       line-height と .index-interview-title の margin-top も合わせて調整している。
       結果: 文字と文字の実距離 26px → 11px */
  .index-interview-heading { position: relative; inset: auto; margin-top: 0; }
  .index-interview-lead { font-size: 17px; line-height: 1.2; }
  .index-interview-title-row { gap: 12px; margin-top: 0; }
  .index-interview-tire { width: 34px; }
  .index-interview-title { margin-top: 4px; }
  .index-interview-title img { width: min(52vw, 240px); }

  /* ★2026-08-14 G-2: touch-action: pan-y ＝「縦の指なぞりはブラウザに任せ、横は自分で扱う」。
     これが無いと横に払った時にブラウザ側の処理と取り合いになる */
  .index-interview-carousel { position: relative; inset: auto; height: auto; margin-top: 40px; touch-action: pan-y; }
  .index-interview-item { transition: none; }
  .index-interview-item.is-prev,
  .index-interview-item.is-next,
  .index-interview-item.is-out-left,
  .index-interview-item.is-out-right { display: none; }
  /* ★2026-08-03 写真を78vw→68vwへ縮小(跡田さん指摘・案B)。
     78vwだと左右の矢印(38px)との隙間が2pxしかなく楕円に触れて見えていた。
     68vwで隙間22pxを確保。矢印のサイズは変更していない。
     退場中のカード(.is-leaving)も同じ幅にすること(ズレると滑り出しが揃わない) */
  .index-interview-item.is-active {
    position: relative; inset: auto;
    display: block;
    width: min(68vw, 296px);
    margin: 0 auto;
  }

  /* ★2026-08-03 SPのカルーセルに横スライドを追加(跡田さん依頼「スマホにアニメがない」案②)。
     SPは中央1枚だけを通常配置し待機分は display:none のため、PCのような
     left/width のトランジションが使えない。そこで
       ・新しい1枚 = 進行方向の外側から滑り込む(keyframes)
       ・古い1枚   = .is-leaving で絶対配置に退避させ反対側へ抜ける(index.js が付与)
     の2本立てで「押した向きに流れる」動きを作る。
     130%/180% は自分の幅基準の移動量。画面外から始めるため 100% より大きくしている。
     ※PCは従来どおり(この指定はSP幅のみ) */
  .index-interview-carousel.is-dir-next .index-interview-item.is-active {
    animation: ivSlideInRight 0.42s cubic-bezier(0.22, 0.68, 0.32, 1) both;
  }
  .index-interview-carousel.is-dir-prev .index-interview-item.is-active {
    animation: ivSlideInLeft 0.42s cubic-bezier(0.22, 0.68, 0.32, 1) both;
  }
  .index-interview-item.is-leaving {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: min(68vw, 296px);
    margin: 0;
    pointer-events: none;
  }
  .index-interview-carousel.is-dir-next .index-interview-item.is-leaving {
    animation: ivSlideOutLeft 0.42s cubic-bezier(0.22, 0.68, 0.32, 1) both;
  }
  .index-interview-carousel.is-dir-prev .index-interview-item.is-leaving {
    animation: ivSlideOutRight 0.42s cubic-bezier(0.22, 0.68, 0.32, 1) both;
  }
  @keyframes ivSlideInRight {
    from { transform: translateX(130%); opacity: 0.3; }
    to   { transform: translateX(0);    opacity: 1; }
  }
  @keyframes ivSlideInLeft {
    from { transform: translateX(-130%); opacity: 0.3; }
    to   { transform: translateX(0);     opacity: 1; }
  }
  @keyframes ivSlideOutLeft {
    from { transform: translateX(-50%);  opacity: 1; }
    to   { transform: translateX(-180%); opacity: 0; }
  }
  @keyframes ivSlideOutRight {
    from { transform: translateX(-50%); opacity: 1; }
    to   { transform: translateX(80%);  opacity: 0; }
  }
  /* 矢印を押した手応え(スマホはホバーが効かないため) */
  .index-interview-arrow:active { transform: scale(0.9); }
  .index-interview-arrow--next:active { transform: scaleX(-1) scale(0.9); }

  /* ★2026-08-14 G-2: 現在地の点。社員インタビュー一覧(interview-index.css)と
     同じ寸法・同じ色に揃えているので、2ページで見え方が食い違わない */
  .index-interview-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
  }
  .index-interview-dots-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--idx-ink);
    opacity: 0.22;
    transition: opacity 0.2s ease;
  }
  .index-interview-dots-dot.is-active { opacity: 1; }
  .index-interview-item-card {
    position: relative;
    inset: auto;
    display: block;
    width: 92%;
    height: auto;
    margin: -8px auto 0;
    padding: 14px 0 16px;
  }
  .index-interview-item-card::before { inset: 5px; border-radius: 5px; }
  .index-interview-item-catch { position: relative; inset: auto; display: block; font-size: 16px; }
  /* PC用の --long 縮小(30×--ipx)より詳細度を揃えて上書き（SPは14px） */
  .index-interview-item-card--long .index-interview-item-catch { font-size: 14px; line-height: 1.4; }
  .index-interview-item-divider { position: relative; inset: auto; display: block; width: 80%; height: 2px; margin: 10px auto; transform: none; }
  .index-interview-item-profile { position: relative; inset: auto; display: block; margin: 0 0 0 24px; font-size: 12px; line-height: 1.55; }
  .index-interview-arrow { top: 26%; width: 38px; height: 38px; }
  .index-interview-arrow--prev { left: 4px; }
  .index-interview-arrow--next { left: auto; right: 4px; }

  /* ---- MESSAGE ---- */
  .index-message { position: relative; inset: auto; width: auto; height: auto; margin: 32px 16px 0; }
  .index-message-card { height: auto; border-radius: 28px; padding: 18px 14px 22px; }
  .index-message-card::before { inset: 8px; border-radius: 22px; }
  .index-message-card > * { position: relative; z-index: 1; }
  .index-message-photo { position: relative; inset: auto; display: block; width: 100%; border-radius: 16px; }
  .index-message-en { position: relative; inset: auto; margin-top: 12px; font-size: 16px; }
  .index-message-title { position: relative; inset: auto; font-size: clamp(22px, 6.4vw, 30px); margin-top: 6px; }
  .index-message-text { position: relative; inset: auto; margin-top: 10px; font-size: 13px; line-height: 1.8; }
  .index-message-cta { position: relative; inset: auto; }

  /* ---- ENVIRONMENT ---- */
  /* ★2026-08-02 SPでもENVカードの円写真を表示(森さん依頼タスク04・跡田さん案B4採用)。
     PCの「カード左上重ね」はSPだとタイトルに被るため、「カード上辺中央のバッジ」配置に変更。
     DOM順(パネル→写真)のためflexのorderで写真をパネル前へ移し、負マージンで半分沈める
     (絶対配置と違い、どの幅でも自動で位置が合う) */
  .index-environment { width: auto; height: auto; margin: 32px 12px 56px; padding: 26px 12px 32px; border-radius: 26px; display: flex; flex-direction: column; }
  .index-environment-title { position: relative; inset: auto; width: min(84vw, 420px); margin: 0 auto; order: 1; }
  .index-environment-subtitle { position: relative; inset: auto; margin-top: 10px; font-size: 17px; letter-spacing: 2px; order: 2; }
  .index-environment-photo {
    display: block;
    position: relative;
    z-index: 2;
    order: 3;
    width: 100px;
    height: 100px;
    margin: 18px auto -50px;           /* 下50px(=写真の半分)をパネルに沈める */
  }
  .index-environment-photo img { position: absolute; height: auto; }
  .index-environment-photo-back { left: -6px; top: 10px; width: 96px; }
  .index-environment-photo-img { left: 0; top: 0; width: 96px; border-radius: 50%; border: 2px solid var(--idx-ink); box-sizing: border-box; }
  .index-environment-photo-kirakira { left: 80px; top: 0; width: 20px; }
  .index-environment-panel { position: relative; inset: auto; width: auto; height: auto; margin-top: 0; padding: 58px 10px 22px; border-radius: 30px; order: 4; }
  .index-environment-panel::before { inset: 8px; border-radius: 24px; }
  .index-environment-panel > * { position: relative; z-index: 1; }
  /* ★2026-08-02 案B4: タイトル拡大+本文をゆったり(固定改行はSPでは無効化=「なが/ら」の孤立解消) */
  .index-environment-panel-title { position: relative; inset: auto; font-size: clamp(21px, 6vw, 28px); }
  .index-environment-panel-text { position: relative; inset: auto; margin-top: 12px; padding: 0 6px; font-size: 13.5px; line-height: 1.95; }
  .index-environment-panel-text br { display: none; }
  /* PC側の .index-environment-panel .index-viewmore(絶対配置)より詳細度を揃えて打ち消す */
  .index-environment-panel .index-viewmore { position: relative; inset: auto; margin: 14px auto 0; }
  .index-environment-deco { display: none; }
  /* PC側でリスト自体を絶対配置＋中央寄せにしているので、ここで解除する（260824） */
  .index-environment-links { position: relative; inset: auto; transform: none;
    display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: fit-content; margin: 22px auto 0; order: 5; }
  .index-environment-links a { position: relative; inset: auto; gap: 10px; }
  .index-environment-links-label { font-size: 20px; }
  .index-environment-links-circle { width: 40px; height: 40px; }
  .index-environment-links-circle img { width: 24px; }
  .index-environment-cta { position: relative; inset: auto; width: min(80vw, 420px); height: 60px; margin: 26px auto 0; font-size: 22px; letter-spacing: 1.5px; gap: 20px; order: 6; }
  .index-environment-cta-wo { font-size: 20px; }
  .index-environment-cta img { width: 44px; }
}