@charset "UTF-8";

/* ========================================
   社員インタビュー一覧（interview-index）
   Figma: node 54:9031（PC 1920）準拠。ただしコンテンツ幅は他のインタビュー
   member ページ（.interview-content）と揃える＝ max-width:1400px ＋ 左右padding24px
   ・中央寄せ（zoom は使わず clamp/vw で連続縮小）。カード内部は Figma(1606幅)設計を
   1400幅に合わせ約0.84倍に再調整（比率保持）。ヒーロータイトルは member と同じ70%縮小。
   可変グリッドでリフロー（営業3列/整備2列 → タブレット2列 → SP1列）。色は赤→青→緑循環。
======================================== */
.interview-index {
  /* ---- テーマカラー ---- */
  --iv-red:   #f75959;
  --iv-blue:  #55baf5;
  --iv-green: #47d684;
  --iv-ink:   #2c2c2c;   /* 文字（キャッチ・プロフィール）*/
  --iv-cream: #fdf8e2;   /* セクション地色（Figma）*/
  --iv-pill:  #212121;   /* 職種タブの濃紺 */
  --iv-line:  #707070;   /* カードの灰ヘアライン */
  /* ヒーローより下は単色の濃いベージュ（クリーム）：セクション間の隙間（マージン部分）にも
     この article 背景が透けるため、道路下端から下が全て単色クリームになる（ヒーローは自前の
     赤帯・道路で全幅を塗るので影響なし）。*/
  background-color: var(--iv-cream);
}

/* ============================================================
   Hero（interview/member1〜8 の .interview-hero と同じ構造）
   背高の単色帯＋中央にタイトル「社員インタビュー」＋白「INTERVIEW」＋車＋道路。
   ※ Figma ではなく member ヒーローに合わせる（帯色は一覧用に赤で固定）。
============================================================ */
.interview-index-hero {
  position: relative;
  width: 100%;
}
/* メインビジュアル帯。高さ380(1920の値)を「コンテンツhold終端(1260px)」まで維持し、
   それ以下でカードと連動して縮む（SP到達値222@640は従来どおり）。
   ※member ページはヒーローが1920から縮む設計だが、一覧はカードのholdと縦バランスを揃える。*/
.interview-index-hero-main {
  position: relative;
  width: 100%;
  height: clamp(222px, 59px + 25.484vw, 380px);    /* 380@1260 / 222@640 */
  background-color: var(--iv-red);
  overflow: hidden;
}
/* タイトル「社員インタビュー」＋「INTERVIEW」ラッパー（中央・member と同一）*/
.interview-index-hero-title-wrap {
  position: absolute;
  top: clamp(16%, 12% + 5vw, 24%);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(min(280px, 63vw), 65.97vw - 142.2px, 689px);  /* 689@1260 / 280@640（holdをカードに同期）*/
  max-width: 90%;
  z-index: 2;
}
.interview-index-hero-title {
  display: block;
  width: 100%;
  height: auto;
}
/* 「INTERVIEW」白・Dela（member の「INTERVIEW 0X」相当。一覧なので番号なし）
   フォント/余白とも 1920の値を1260までhold → 以下でカードと連動して縮小（SP値は従来どおり）*/
.interview-index-hero-no {
  margin: clamp(4px, 0.97vw - 2.2px, 10px) 0 0;        /* 10@1260 / 4@640 */
  padding-left: 0.1em;
  font-size: clamp(2.2rem, 3.4px + 2.903vw, 4rem);     /* 40@1260 / 22@640 */
  color: #fff;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
}
/* 車（道路の上・中央やや右）。タイヤが道路中央の白線に触れる高さ。
   PNG下側に画像高9.3%の透明余白があるため translateY(9.3%) で相殺（%は自身の高さ基準
   なので、どの幅でも余白ぶんが正確に消える）。白線は下から18.25〜21.75px（中心20）
   → bottom:18px でタイヤ下端が白線の上端に触れる（実測でPNGのタイヤ描画位置を微補正）。*/
.interview-index-hero-car {
  position: absolute;
  bottom: 18px;
  left: 70%;
  transform: translate(-50%, 9.3%);
  width: clamp(150px, 67.4px + 12.903vw, 230px);   /* 230(=1920の値)@1260 / 150@640 */
  height: auto;
  z-index: 3;
}
/* 下部の道路（グレー＋白破線）member と同一 */
.interview-index-hero-road {
  position: relative;
  width: 100%;
  height: 40px;
  background-color: #595959;
}
.interview-index-hero-road::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: clamp(3px, 2px + 0.08vw, 4px);
  /* 破線の長さ/周期も 1920の値(≒24px/48px)を1260までhold → 以下で連動縮小 */
  background-image: repeating-linear-gradient(
    to right,
    #fff 0,
    #fff clamp(14px, 0.7px + 1.84vw, 24px),
    transparent clamp(14px, 0.7px + 1.84vw, 24px),
    transparent clamp(28px, 1.4px + 3.7vw, 48px)
  );
  transform: translateY(-50%);
}

/* ============================================================
   セクション（営業職 / 整備士）＝地色クリーム
============================================================ */
/* 縦余白のvw傾きは「コンテンツhold終端(画面1260px)で上限値になる」よう設定（上限÷1260）。
   → カードがholdしている間（左右余白がある間）は縦余白も上限で固定され、
     カードが縮み始める1260px以下で初めて一緒に縮む（早すぎる縮み防止）。*/
.interview-index-group {
  background-color: var(--iv-cream);
  margin-top: clamp(40px, 7.54vw, 95px);    /* セクション間（Figma: 営業↔整備 約95px）*/
  padding-bottom: clamp(42px, 7.62vw, 96px);
}
/* 1つ目（営業）の上：ヒーロー(道路下端)との間の隙間。
   Figma実測は165pxだが、ユーザー指定でその半分（83px）。*/
.interview-index-hero + .interview-index-group {
  margin-top: clamp(28px, 6.59vw, 83px);
}
/* member .interview-content と同じ：max-width 1400px ＋ 左右24px ・中央。
   さらにコンテナ化（hearing の true-hold と同じ方式）：中身の余白・文字を cqw（コンテナ幅％）で
   持つことで、コンテンツ幅が Figma(1606px) より狭くても「箱同士・箱内の比率」を Figma と同一に保つ。
   ウィンドウを狭めると、まず左右余白が詰まり(max-width 中央寄せ)、その後は全部が同率で縮む。*/
.interview-index-inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  container-type: inline-size;
}
/* PC(≥1025px)：ヒーロー下のコンテンツ中身を一律90%に縮小（zoom）。
   中央寄せ・クリーム背景は全幅のまま。狭めると max-width(1400) の中央寄せで
   両端の余白から詰まる（現状挙動を維持）。タブレット/スマホ(≤1024px)は今回対象外。*/
@media screen and (min-width: 1025px) {
  .interview-index-inner {
    zoom: 0.9;
  }
}

/* 職種タブ（濃紺ピル＋白文字）。セクション上端に重ねる（Figma: 帯にまたがる）*/
.interview-index-tab {
  width: max-content;
  /* Figma: ピルの縦中央＝背景境界（薄いベージュ地色 ↔ クリーム）に一致（pill中心517≒クリーム上端512）。
     負マージンだと親(group/inner)とマージン相殺して効かないため、transform で見た目だけ
     半分（ピル高の50%）持ち上げる＝どの幅でも中心が境界にぴったり。道路とは隙間があり重ならない。
     Figma比率(コンテンツ幅1606基準): ピル100×331, 文字80(=4.98cqw), 上下pad10(=0.62cqw),
     左右pad45.5(=2.83cqw)。margin-bottom: クリーム上端→カード上端144.68(=9.01cqw) − ピル高6.22cqw ≒ 2.79cqw。*/
  margin: 0 auto 2.79cqw;
  transform: translateY(-50%);
  position: relative;
  z-index: 1;
  padding: 0.62cqw 2.83cqw;
  background-color: var(--iv-pill);
  color: #fff;
  border-radius: 999px;
  /* ★2026-08-25 「営業職」「整備士」の文字を2px小さく（跡田さん指示）。
     cqw のままだと幅ごとに縮む量が変わるので、calc で一律 2px 引く＝どの幅でも指示どおり2px小さい。
     ピルの padding は cqw のままなので、文字が縮んだぶんピルも自然に小さくなる */
  font-size: calc(4.98cqw - 2px);            /* Figma 80/1606 − 2px */
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
}

/* ============================================================
   カードグリッド
============================================================ */
.interview-index-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 営業=3列 */
  /* Figma比率: 行間105/1606=6.54cqw ・ 列間66.5/1606=4.14cqw（カード幅は自動で30.57%になる）*/
  gap: 6.54cqw 4.14cqw;
  align-items: start;
}
/* 整備士＝2列（中央寄せ）。Figma: カード491×2＋gap66.5 = 1048.5/1606 = 65.28%
   → カード1枚の幅が営業職と同じ 30.57% になる（旧1080px固定は営業よりカードが大きくなっていた）*/
.interview-index-cards--two {
  grid-template-columns: repeat(2, 1fr);
  width: min(100%, 65.28cqw);
  margin: 0 auto;
}

/* ---- 1枚のカード ---- */
.interview-index-card {
  --c: var(--iv-red);
  /* カード自身もコンテナ化：箱内（白カード・文字・余白）の cqw 基準を「カード幅」にする
     ＝列数が変わってもカード内の比率が Figma と同一のまま伸縮（hearing のカードと同じ）*/
  container-type: inline-size;
}
.interview-index-card--red   { --c: var(--iv-red); }
.interview-index-card--blue  { --c: var(--iv-blue); }
.interview-index-card--green { --c: var(--iv-green); }

.interview-index-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease;
}
.interview-index-card-link:hover {
  transform: translateY(-4px);
}

/* 写真＝破線色楕円フレーム＋人物切り抜き */
.interview-index-card-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 982 / 776;   /* フレーム楕円の縦横比 */
}
.interview-index-card-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 人物PNGは既に楕円マスク済み。破線フレームより大きく重ね、頭は枠の上へはみ出させる
   （見本準拠：クリップせず、透明マスク済みなので楕円外は表示されない）。
   体の下側は後続のテキストカードが前面に来て自然に隠れる（DOM順）。*/
.interview-index-card-person-clip {
  position: absolute;
  inset: 0;
}
.interview-index-card-person {
  position: absolute;
  left: 50%;
  /* Figma実測(54:9104 レンダリング)とのピクセル照合値:
     顔の最大幅 18.1%cw・頭が楕円上端から 6.86%cw 上に出る。
     PNG(904×846, 頭上の透明42px)から逆算 → 幅93% / top−14.15%(楕円box高さ基準)。*/
  top: -14.15%;
  transform: translateX(-50%);
  width: 93%;
  max-width: none;      /* 共通の img{max-width:100%} を解除して拡大を効かせる */
  height: auto;
}

/* 本体（白カード＋色枠＋灰ヘアライン）。箱内は Figma のカード幅491基準の cqw。
   Figma: 白カードは楕円の下端に 51.7px 重なる（tx top 993 < 楕円下端 1044.7）→ 負マージン。*/
.interview-index-card-body {
  position: relative;
  margin: -10.52cqw 4.28cqw 0;               /* Figma: 上▲51.7 / 左右21 (÷491) */
  background-color: #fff;
  border: 1.43cqw solid var(--c);            /* Figma: 色帯 7px (÷491) */
  border-radius: 2.44cqw;                    /* Figma: 12px (÷491) */
  /* Figma: 白内箱と外箱に灰 1px ヘアライン */
  box-shadow:
    0 0 0 1px var(--iv-line) inset,
    0 0 0 1px var(--iv-line);
}
/* キャッチ（Dela Gothic・中央・下に色の区切り線）。
   Figma: キャッチ領域は行数に関わらず高さ一定(134.9/491=27.47cqw)で文字は縦中央
   （1行の大庭カードも2行カードと同じ高さ）。3行(整備士)は min-height を超えて自然に伸びる。*/
.interview-index-card-catch {
  margin: 0;
  padding: 4.48cqw 1cqw;                     /* Figma: 上下22 (÷491) */
  min-height: 27.47cqw;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--iv-ink);
  font-size: max(14px, 8.15cqw);             /* Figma 40 (÷491)。下限14px=スマホ幅の可読性保証 */
  line-height: 1.125;                        /* Figma 45/40 */
  letter-spacing: 0.05em;                    /* Figma tracking 2/40 */
  text-align: center;
  border-bottom: 0.61cqw solid var(--c);     /* 区切り線（Figma 3px ÷491）*/
}
/* 整備士グループ（--two）のカードは営業職と別パターンで統一（青柳カード node 54:9405 の形式）：
   白カードが楕円より広い（tx 509 vs 楕円491 → 左右 +9px ≒ 1.83cqw 外側へ拡張）、
   キャッチは一回り小さい 35px（営業職は40px）でトラッキングなし。
   → 営業職6枚＝標準形式／整備士2枚＝幅広形式 の2パターン（グループ内は同一形式）。*/
.interview-index-cards--two .interview-index-card .interview-index-card-body {
  margin: -10.52cqw -1.83cqw 0;
}
.interview-index-cards--two .interview-index-card .interview-index-card-catch {
  font-size: max(14px, 7.13cqw);             /* Figma 35 (÷491)。下限14px */
  letter-spacing: 0;
}

/* プロフィール（入社年 / 職種 / 名前）*/
.interview-index-card-profile {
  padding: 3.48cqw 4.11cqw 4.68cqw;          /* Figma: 17 / 20 / 23 (÷491) */
  color: var(--iv-ink);
  /* ★2026-08-07 C-6: 下限10px だとスマホで実測10.4px まで下がって読みにくかったため 12px へ（跡田さん判断）*/
  font-size: max(12px, 4.48cqw);             /* Figma 22 (÷491)。下限12px */
  line-height: 1.545;                        /* Figma 行ピッチ 34/22 */
}
.interview-index-card-profile p {
  margin: 0;
}

/* ============================================================
   レスポンシブ（列リフロー）
   hearing の6カードと同じ方式：@container（コンテンツ幅基準・しきい値も同じ 1000/600）。
   カード内は「カード幅基準の cqw」なので、列数が変わってもカード内の比率は崩れない。
   3列(PC=zoom域) → 2列(コンテナ≦1000 ≒ 画面1024px以下) → 1列(コンテナ≦600 ≒ 画面648px以下)。
============================================================ */
@container (max-width: 1000px) {
  /* 営業 3列→2列（整備士も同時に同じグリッドへ連動＝同じカード幅・位置）。
     切替でカードが巨大化しないよう、切替直前(画面1025px)のカード寸法(≒300px)を保つ
     上限 641px（= 2×300 + 列gap≒40）でグリッドをhold。余白はPC最大幅時と同様に
     左右両端へ（クリーム地）。窓を縮めると余白から詰まり、グリッドが100%に達したら
     （画面≒689px）カードも比例縮小に移る。*/
  .interview-index-cards,
  .interview-index-cards--two {
    grid-template-columns: repeat(2, 1fr);
    width: min(100%, 641px);
    margin-inline: auto;
    /* 行間・列間もカードと同じくhold（切替直前=画面1025pxの値で固定→グリッド100%後に縮小）。
       min(固定px, 係数cqw)：係数はグリッド上限641px時に固定値と一致するよう設定。*/
    gap: min(64.2px, 10.02cqw) min(40.7px, 6.35cqw);
  }
  /* ピル（営業職/整備士）も同じタイミングでhold→縮小（値は切替直前=1025pxのレンダリング値）*/
  .interview-index-tab {
    /* ★2026-08-25 上のベースルールと同じく 2px 引く（跡田さん指示）*/
    font-size: min(46.9px, calc(7.63cqw - 2px));
    padding: min(6.1px, 0.95cqw) min(27.8px, 4.34cqw);
    margin-bottom: min(27.4px, 4.27cqw);
  }
}
/* 1列ティアは廃止：スマホ最小幅まで2列を継続（上の @container 1000px のルールが
   そのまま続く）。スマホ幅ではカードが小さくなるため、下の @media(≤648) で
   左右paddingを圧縮し、文字にはベースルール側の下限(max)で可読性を保証する。*/

/* ============================================================
   ヒーロー・縦余白のティア別hold（コンテナ外の要素は @media で同期）
   タブレット帯(1024→689px)・スマホ帯(648→329px)の「カードhold中」は
   ヒーローと縦余白も切替直前の値で固定し、カード縮小と同時に縮む。
   ※各値はティア境界(1025/1024・649/648)で連続するよう逆算。
============================================================ */
@media (max-width: 1024px) {
  .interview-index-hero-main {
    height: clamp(222px, 46.47vw, 320px);            /* 320=1025px時の値でhold */
  }
  .interview-index-hero-title-wrap {
    width: clamp(min(280px, 63vw), 77.5vw, 534px);   /* 534@1025 */
  }
  .interview-index-hero-no {
    font-size: clamp(2.2rem, 4.81vw, 33.2px);        /* 33.2@1025 */
    margin: clamp(4px, 1.12vw, 7.7px) 0 0;
  }
  .interview-index-hero-car {
    width: clamp(150px, 28.98vw, 200px);             /* 200@1025 */
  }
  .interview-index-hero-road::before {
    background-image: repeating-linear-gradient(
      to right,
      #fff 0,
      #fff clamp(14px, 2.84vw, 19.6px),
      transparent clamp(14px, 2.84vw, 19.6px),
      transparent clamp(28px, 5.7vw, 39.3px)
    );
  }
  .interview-index-group {
    margin-top: clamp(40px, 11.22vw, 77.3px);        /* 77.3@1025 */
    padding-bottom: clamp(42px, 11.34vw, 78.1px);
  }
  .interview-index-hero + .interview-index-group {
    margin-top: clamp(28px, 9.8vw, 67.5px);          /* 67.5@1025 */
  }
}
@media (max-width: 648px) {
  /* 1列(スマホ)帯のヒーローは member(各インタビュー)ページと同一の式に戻す
     ＝実機でヒーローの縦幅・車サイズが member と揃う（帯222px・車150px・タイトル/INTERVIEWも同値）。
     2列帯(hold 302等)からは切替点で一段小さくなる（member準拠を優先）。*/
  /* 帯高：スマホ(≤430px)は member と同一の222pxで不変（道路位置も変わらない）。
     431px以上はタイトル群の育ち（90vw連動）に合わせて必要分だけ伸ばし（222→278px）、
     下端基準の車がタイトル群の下に押し出される＝スマホと同じ分離感を保つ。*/
  .interview-index-hero-main {
    height: clamp(222px, 36.8px + 43.08vw, 278px);   /* 222@430 / 278@560〜648 */
  }
  /* タイトルは「503pxホールド版」（member化前の値）。実効幅は max-width:90% ガードにより
     min(503px, 90vw) ＝ 559px以下で画面に合わせて縮む。*/
  .interview-index-hero-title-wrap {
    width: clamp(min(280px, 63vw), 152.9vw, 503px);
  }
  /* INTERVIEW も元の 31.2px に戻し、タイトルの縮み(90vwガード)と同じ比率で連動縮小：
     31.2 × (90vw ÷ 503) = 5.58vw。タイトルが503で止まる間は31.2で固定。余白も同比率。*/
  .interview-index-hero-no {
    font-size: min(31.2px, 5.58vw);
    margin: min(7.3px, 1.31vw) 0 0;
  }
  /* 車はサイズ・位置とも member と同一（SPで150px・道路の白線より上に浮く member の高さ）*/
  .interview-index-hero-car {
    width: clamp(150px, 110px + 6.25vw, 270px);
    bottom: clamp(22px, 18px + 0.6vw, 28px);
    transform: translateX(-50%);
  }
  .interview-index-hero-road::before {
    background-image: repeating-linear-gradient(
      to right,
      #fff 0,
      #fff clamp(14px, 8px + 0.83vw, 30px),
      transparent clamp(14px, 8px + 0.83vw, 30px),
      transparent clamp(28px, 16px + 1.67vw, 60px)
    );
  }
  /* 縦余白は旧1列ティア用のholdを廃止し、タブレット帯(≤1024)の傾きをそのまま継続
     （2列がスマホまで続くため。@media 1024 の clamp が引き続き効く）。*/
  /* 2列継続のためスマホ幅では左右paddingを圧縮してカード幅を確保（24→16px）*/
  .interview-index-inner {
    padding: 0 16px;
  }
}

/* ============================================================
   スマホ帯（≤540px）：カード列を横並びスクロールに（中央スナップ＋両側peek）
   営業6枚・整備士2枚それぞれ1行の横スクロール。カード幅=コンテナの68%。
   スナップ中央寄せ＝止まると主役カードが画面中央・左右両側に隣のカードが
   見切れる(peek)ので「横にスクロールできる」がレイアウトだけで伝わる。

   ★2026-08-14 E-3: 切替点を 648px → 540px に変更（跡田さん選択）。
   648pxだと601px幅の小型タブレットでも1枚ずつの横送りになり、2枚並べる余裕が
   あるのに片側が大きく空いていた。ヒーロー（上の @media 648）は member ページと
   寸法を揃えるための指定なので 648px のまま動かさない。
============================================================ */
@media (max-width: 540px) {
  .interview-index-cards,
  .interview-index-cards--two {
    display: flex;                    /* grid(2列)を解除して横1列に */
    width: auto;
    /* 上の−8pxは下のpadding-top＋8pxと相殺＝カードの見た目の位置は不変のまま、
       スクロールコンテナのクリップ境界だけ8px上に広がる（hoverで4px浮いても頭が切れない）*/
    margin: -8px -16px 0;             /* 左右= 画面端までスクロール領域を広げる（inner padding分） */
    /* 上=人物の頭のはみ出し(6.86%×68cqw≒4.7cqw)＋hover浮き4px の受け皿。
       左右= (画面幅−カード幅)/2 ＝ 端のカード(1枚目/最後)も画面中央で止まれる余白 */
    padding: calc(6cqw + 8px) calc(16cqw + 16px) 6px;
    gap: 4.14cqw;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;    /* 指を離すとカードが中央に吸着 */
    scrollbar-width: none;            /* Firefox: バー非表示 */
  }
  .interview-index-cards::-webkit-scrollbar { display: none; }
  .interview-index-card {
    flex: 0 0 68cqw;                  /* カード幅68% → 左右に約16%ずつ隣が見える */
    scroll-snap-align: center;        /* 中央スナップ */
  }
  /* 整備士：白カードは Figma どおり幅広のまま（カードより左右+1.83cqw張り出す）。
     代わりにカード（人物＋白カードの親要素）同士の間隔を広げて、白カード間の
     見た目の余白を営業職と同じにする。
     営業職の白カード間 = 列間4.14 + inset(2.91×2) = 9.96cqw
     整備士: 12.45cqw − 張り出し(1.24×2) = 9.96cqw ✓ */
  .interview-index-cards--two {
    gap: 12.45cqw;
  }
}

/* ============================================================
   カルーセルのドットインジケーター（interview-index.js が各列の直後に生成）
   スマホ帯（横スクロール時）のみ表示。現在カード＝濃紺・他＝薄グレー。
============================================================ */
.interview-index-dots { display: none; }
@media (max-width: 540px) {                 /* ★2026-08-14 E-3: 横スクロール帯に合わせる */
  .interview-index-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
  }
  .interview-index-dots-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--iv-pill);   /* 職種タブと同じ濃紺 */
    opacity: 0.22;
    transition: opacity 0.2s ease;
  }
  .interview-index-dots-dot.is-active {
    opacity: 1;
  }
}