@charset "UTF-8";

/* ===== 企業一覧 / 業種別企業一覧（company-list.html / company-gyosyu.html）=====
   260804 新設。ページ全体の骨格（.page-header / .detail-section / .pagination / .newsearch-band 等）は
   page.detail.css・page.search.css・page.top.css を再利用しているため、本ファイルは企業カード周りだけを持つ。

   ページ全体系のリセットは書かない（body.modern-detail-theme のリセットは page.detail.css:35-37 が担当）。
   ここで body 系セレクタを足すと、同じ .modern-detail-theme を使う求人詳細・企業詳細まで巻き込む。
   ── 260714 の規約どおり、リセットが必要になった場合は :where() で詳細度 0 にすること。 */

/* ---- 業種ピル ---- */
.gyosyu-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 4px; }
.gyosyu-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--white); color: var(--text-light);
  font-size: .86rem; font-weight: 500; line-height: 1.4;
  transition: all .2s;
}
a.gyosyu-pill:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-pale); }
.gyosyu-pill.active { background: var(--primary); border-color: var(--primary); color: var(--white); }
.gyosyu-pill-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--bg-light); color: var(--text-muted); font-size: .72rem; font-weight: 700;
}
.gyosyu-pill.active .gyosyu-pill-count { background: rgba(255,255,255,0.25); color: var(--white); }

/* ---- H1直下のリード文（260803 資料の指定）---- */
/* 260826 max-width:720px を外した。この文は55字＝約810pxで、720pxだと49字目
   （「ご確認い」）で折れて2行目が6文字だけ残る＝語の途中で切れていた。
   コンテナは1180pxあるので制限が無ければ1行に収まる（実測 @1440・@1024 とも1行）。
   768px以下は枠自体が728pxで、720pxの有無に関わらず折り返し位置は変わらない
   ＝この制限は行長を抑える役に立たないまま、不自然な改行だけを作っていた。 */
.page-lead {
  margin: 10px 0 0;
  font-size: .92rem; line-height: 1.8; color: var(--text-light);
}

/* ---- 業種セクション見出し（左：タイトル / 右：全N件＋左右ボタン）---- */
.company-section { margin-top: 8px; }
.company-section-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.company-section-tools { display: flex; align-items: center; gap: 12px; }
/* 260810 --text-muted(#8A8A9A) は白地で 3.40:1 しか出ずAAに届かないので --text-light を使う。
   見出し（19.2px/700/#1A1A2E）に対しサイズ・太さで十分従属しており、逆転はしない。 */
.company-section-count { font-size: .84rem; color: var(--text-light); white-space: nowrap; }

/* 「○○業のすべての企業を見る ＞」はセクション下部・右寄せ（260803 資料） */
.company-section-footer { display: flex; justify-content: flex-end; margin-top: 14px; }
.company-section-more {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: .84rem; font-weight: 700; color: var(--primary); white-space: nowrap;
}
.company-section-more:hover { text-decoration: underline; }
.company-section-more .material-icons-outlined { font-size: 16px; }

/* ---- 企業カードのカルーセル（すべての企業ページ）----
   260810 3列グリッド → 横スクロールのカルーセルへ変更（260803 資料「企業10件カルーセル」）。
   ボタンが効かない環境でも track 自身が overflow-x:auto なので必ず最後まで見られる。 */
.company-carousel { position: relative; margin-top: 4px; }
.company-carousel-track {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* カードの hover で translateY(-3px) するので上下に逃げ幅を持たせる */
  padding: 4px 4px 10px; margin: -4px -4px 0;
  scrollbar-width: thin;
}
.company-carousel-track::-webkit-scrollbar { height: 6px; }
.company-carousel-track::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

/* 左右ボタンは見出しの右に置く（260810 意匠検品）。
   カードに重ねる置き方はどの幅でも24〜46px重なり、1024pxではロゴを覆っていた。 */
.company-carousel-nav { display: inline-flex; gap: 6px; }
.company-carousel-btn {
  width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); color: var(--text-light);
  border: 1px solid var(--border); border-radius: 50%;
  cursor: pointer; transition: all .2s;
}
.company-carousel-btn .material-icons-outlined { font-size: 20px; }
.company-carousel-btn:hover:not(:disabled) { color: var(--primary); border-color: var(--primary); }
.company-carousel-btn:disabled { opacity: .3; cursor: default; }
/* カードが溢れていないセクション（1〜3社）はボタンもスワイプ案内も出さない。
   260810 display:none だと場所ごと詰まり、「全N件」の右端が矢印の有無で86pxずれて
   8セクションの右肩が2列に割れて見えた。**場所は確保したまま隠す。**
   visibility:hidden はタブ順からも外れるのでキーボード操作にも影響しない。 */
.company-carousel-nav.is-static { visibility: hidden; }
.modern-detail-theme .company-carousel.is-static .scroll-hint { display: none; }

.company-item {
  display: flex; flex-direction: column; gap: 10px;
  flex: 0 0 auto; width: 240px; scroll-snap-align: start;
  padding: 18px; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: all .2s;
}
a.company-item:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); border-color: var(--primary); }
/* 260810 資料どおり、ロゴはカード上部に大きい正方形で置く（従来は社名の左に56px）。
   max-height を付けると aspect-ratio が潰れて 202×150（1.35:1）の横長になり、
   業種別ページの正方形ロゴ（76×76）と格が割れる。**高さ制限は付けない。** */
.company-item-logo {
  width: 100%; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-light); border-radius: var(--radius); overflow: hidden;
}
.company-item-logo img { width: 100%; height: 100%; object-fit: contain; }
.company-item-logo .material-icons-outlined { font-size: 42px; color: var(--text-muted); }
.company-item-name {
  font-size: .95rem; font-weight: 700; color: var(--text); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.company-item-catch {
  font-size: .82rem; color: var(--text-light); line-height: 1.6; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.company-item-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: .78rem; color: var(--text-muted);
}
.company-item-jobs { display: inline-flex; align-items: center; gap: 4px; }
.company-item-meta .material-icons-outlined { font-size: 15px; }
.company-item-jobs { color: var(--primary); font-weight: 700; }

/* ---- 企業リスト（業種別ページ・1カラム）---- */
.company-result-count { font-size: .86rem; color: var(--text-light); margin: 20px 0 12px; }
.company-result-count strong { color: var(--text); font-weight: 700; }
.company-list { display: flex; flex-direction: column; gap: 14px; }
.company-row {
  display: flex; align-items: center; gap: 18px;
  padding: 20px; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: all .2s;
}
.company-row:hover { box-shadow: var(--shadow-hover); border-color: var(--primary); }
.company-row-logo {
  flex: 0 0 76px; width: 76px; height: 76px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-light); border-radius: var(--radius); overflow: hidden;
}
.company-row-logo img { width: 100%; height: 100%; object-fit: contain; }
.company-row-logo .material-icons-outlined { font-size: 32px; color: var(--text-muted); }
/* min-width:0 を付けないと flex アイテムが max-content 未満に縮まず、
   狭い幅で本文が丸ごと次の行へ落ちてロゴだけの行ができる（260810 意匠検品 #6） */
.company-row-body { flex: 1 1 0; min-width: 0; }
.company-row-name { font-size: 1.02rem; font-weight: 700; color: var(--text); margin: 0 0 6px; line-height: 1.5; }
.company-row-name a { color: inherit; }
.company-row-name a:hover { color: var(--primary); text-decoration: underline; }
.company-row-catch {
  font-size: .85rem; color: var(--text-light); line-height: 1.6; margin: 0 0 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.company-row-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .8rem; color: var(--text-muted); }
.company-row-meta span { display: inline-flex; align-items: center; gap: 4px; }
.company-row-meta .material-icons-outlined { font-size: 15px; }
/* 260810 意匠検品の指摘への対応（2回直している）。
   1回目: ラベル(補助)が住所(本体)より**濃く太い**逆転だったので、住所を濃く／ラベルを薄くした。
   2回目: それだとラベルが 3.40:1 でAA未達になり、かつ資料
          （260803/2-○○業の企業一覧.pdf）は「**本社** 東京都渋谷区…」とラベルを太字で描いている。
          → **色は住所と同じ --text-light（8.68:1）に揃え、差は太さだけで付ける**。
   住所を素のテキストノードのままにするとクラスを着られず色を指定できないので
   .company-row-addr で包んでいる（`/s/` の事故と同じ構図を避けるため）。 */
.company-row-label { font-weight: 700; color: var(--text-light); }
.company-row-addr { font-weight: 500; color: var(--text-light); }
/* 掲載中件数は企業一覧のカード（.company-item-jobs）と同じ格に揃える（役割が同じため） */
.company-row-jobs { color: var(--primary); font-weight: 700; }
.company-row-action { flex: 0 0 auto; }

/* ---- SP ---- */
@media screen and (max-width: 767px) {
  /* SPは指スクロールが自然なので左右ボタンは出さず、スワイプの案内だけ出す */
  .company-carousel-nav { display: none; }
  .company-carousel-track { margin: -4px -20px 0; padding: 4px 20px 10px; gap: 12px; }
  .company-item { width: 72vw; }
  /* page.detail.css:1063 の `.modern-detail-theme .scroll-hint{display:none}` と同詳細度だと
     読み込み順頼みになるので、テーマクラスを足して確実に上書きする。
     is-static（溢れていないセクション）では上の :96 が display:none で勝つよう、
     こちらは同詳細度・先行の位置に置いている */
  .modern-detail-theme .company-carousel .scroll-hint { display: flex; }
  .modern-detail-theme .company-carousel.is-static .scroll-hint { display: none; }

  .company-section-header { flex-direction: column; align-items: flex-start; gap: 6px; }
  .page-lead { font-size: .88rem; }

  /* 業種別ページの1カラムは、ロゴ＋社名を上段、ボタンを全幅にする。
     260810 flex-basis を auto にすると本文の max-content が効いて 469px以下で
     社名がロゴの下へ落ち、ロゴ右に269pxの空白ができていた。0 に固定する。 */
  .company-row { flex-wrap: wrap; gap: 14px; padding: 16px; }
  .company-row-logo { flex: 0 0 56px; width: 56px; height: 56px; }
  .company-row-body { flex: 1 1 0; min-width: 0; }
  .company-row-action { flex: 1 1 100%; }
  .company-row-action .btn-detail { width: 100%; justify-content: center; }

  .gyosyu-pills { gap: 6px; margin: 18px 0 4px; }
  .gyosyu-pill { padding: 7px 13px; font-size: .8rem; }
}