/* ============================================================
   ガンバルNINJA プラグイン CSS
   すべて .gbn-scope 内にスコープ
   子テーマ (ganbaru.css) の CSS変数を継承して動作します
   ============================================================ */

/* ─── CSS変数フォールバック (子テーマ未使用時の保険) ────────── */
.gbn-scope {
  --ink:      #1f1d2e;
  --ink-2:    #5a546b;
  --paper:    #fff9ef;
  --shu:      #e94a35;
  --shu-2:    #fff0ec;
  --asagi-2:  #e5eef1;
  --yamabuki: #f7d97e;
  --matcha:   #cfe1bc;
  --radius-lg: 30px;
  font-family: 'Zen Kaku Gothic New', system-ui, sans-serif;
  font-weight: 500;
  color: var(--ink);
}

/* ─── 共通 ボタン ────────────────────────────────────────────── */
.gbn-scope .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 28px; border-radius: 999px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 800; font-size: 15px;
  border: 2.5px solid var(--ink);
  background: white;
  box-shadow: 3px 3px 0 var(--ink);
  text-decoration: none; color: var(--ink);
  transition: transform .12s, box-shadow .12s;
  white-space: nowrap;
  cursor: pointer;
}
.gbn-scope .btn:hover   { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
.gbn-scope .btn:active  { transform: translate(1px,1px);   box-shadow: 1px 1px 0 var(--ink); }
.gbn-scope .btn-primary { background: var(--shu); color: white; border-color: var(--ink); }

/* ═══════════════════════════════════════════════════════════
   社員カード  .staff-grid > .staff-card
   横並びレイアウト: 左=写真、右=名前＋テーブル
   ═══════════════════════════════════════════════════════════ */
.gbn-scope .staff-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.gbn-scope .staff-card {
  display: flex;
  flex-direction: row;
  gap: 0;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 5px 5px 0 var(--ink);
  overflow: hidden;
  background: white;
}

/* 左側: 写真エリア */
.gbn-scope .staff-card .s-photo {
  flex-shrink: 0;
  width: 180px;
  min-height: 220px;
  background: linear-gradient(145deg, var(--shu-2) 0%, var(--asagi-2) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.gbn-scope .staff-card:nth-child(even) .s-photo {
  background: linear-gradient(145deg, var(--asagi-2) 0%, var(--matcha) 100%);
}

.gbn-scope .staff-card .s-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.gbn-scope .staff-card .s-photo-placeholder {
  font-size: 80px;
  display: grid;
  place-items: center;
  height: 100%;
  width: 100%;
  padding: 20px 0 0;
}

/* 右側: 情報エリア */
.gbn-scope .staff-card .s-info {
  flex: 1;
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gbn-scope .staff-card .s-name {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 900;
  font-size: 26px;
  color: var(--shu);
  margin: 0;
  line-height: 1.2;
}

/* 定義リスト テーブル */
.gbn-scope .staff-card .s-table {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.gbn-scope .staff-card .s-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 2px dashed rgba(31,29,46,.15);
}

.gbn-scope .staff-card .s-row:last-child {
  border-bottom: none;
}

.gbn-scope .staff-card .s-row dt {
  flex-shrink: 0;
  width: 72px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ink-2);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 2px 8px;
  text-align: center;
  line-height: 1.5;
  align-self: flex-start;
  margin-top: 1px;
}

.gbn-scope .staff-card .s-row dd {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.6;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   求人カード  .job-grid > .job-card
   縦積みレイアウト: 上=画像、下=情報エリア
   カード全体がFacebookリンク (<a>タグ)
   ═══════════════════════════════════════════════════════════ */
.gbn-scope .job-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.gbn-scope .job-card {
  display: flex;
  flex-direction: column;
  background: white;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 5px 5px 0 var(--ink);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .12s, box-shadow .12s;
}

.gbn-scope .job-card:hover {
  transform: translate(-3px,-3px);
  box-shadow: 8px 8px 0 var(--ink);
  color: inherit;
  text-decoration: none;
}

/* 上部: アイキャッチ画像 */
.gbn-scope .job-card .j-image {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-bottom: 2.5px solid var(--ink);
  background: var(--asagi-2);
  display: grid;
  place-items: center;
}

.gbn-scope .job-card:nth-child(odd) .j-image {
  background: var(--shu-2);
}

.gbn-scope .job-card .j-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 下部: 本文エリア */
.gbn-scope .job-card .j-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 22px 22px;
}

/* 業種ピル */
.gbn-scope .job-card .j-cat-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  background: var(--shu);
  color: white;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 3px 14px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 800;
  font-size: 12px;
}

/* タイトル */
.gbn-scope .job-card .j-title {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 900;
  font-size: 20px;
  margin: 0;
  line-height: 1.3;
  color: var(--ink);
}

/* 会社名 */
.gbn-scope .job-card .j-company {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  margin: -4px 0 0;
}

/* 詳細テーブル */
.gbn-scope .job-card .j-table {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.gbn-scope .job-card .j-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 2px dashed rgba(31,29,46,.15);
}

.gbn-scope .job-card .j-row:first-child {
  border-top: 2px dashed rgba(31,29,46,.15);
}

.gbn-scope .job-card .j-row dt {
  flex-shrink: 0;
  width: 72px;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-2);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 2px 6px;
  text-align: center;
  line-height: 1.5;
  align-self: flex-start;
  margin-top: 1px;
}

.gbn-scope .job-card .j-row dd {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.6;
  margin: 0;
}

/* タグ */
.gbn-scope .job-card .j-tags {
  display: flex; gap: 6px; flex-wrap: wrap;
}

.gbn-scope .job-card .j-tags .tag {
  background: var(--paper);
  border: 2px solid var(--ink); border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px; font-weight: 800;
  font-family: 'Zen Maru Gothic', sans-serif;
  white-space: nowrap; line-height: 1.4;
  display: inline-flex; align-items: center;
}

/* フッター: 応募ボタン */
.gbn-scope .job-card .j-foot {
  margin-top: auto;
  padding-top: 4px;
}

.gbn-scope .job-card .j-foot .btn {
  width: 100%;
  font-size: 16px;
  padding: 14px 20px;
}

/* ═══════════════════════════════════════════════════════════
   業種グリッド  .cats > .cat
   ═══════════════════════════════════════════════════════════ */
.gbn-scope .cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.gbn-scope .cat {
  background: white;
  border: 2.5px solid var(--ink); border-radius: 24px;
  box-shadow: 5px 5px 0 var(--ink);
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform .12s, box-shadow .12s;
}
.gbn-scope .cat:hover {
  transform: translate(-3px,-3px);
  box-shadow: 8px 8px 0 var(--ink);
}

.gbn-scope .cat .cat-photo {
  width: 100%; aspect-ratio: 1/1;
  border-bottom: 2.5px solid var(--ink);
  overflow: hidden;
}
.gbn-scope .cat:nth-child(odd)  .cat-photo { background: var(--shu-2);  }
.gbn-scope .cat:nth-child(even) .cat-photo { background: var(--asagi-2); }

.gbn-scope .cat .cat-body {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 10px; align-items: center;
  padding: 14px 16px;
}
.gbn-scope .cat .h4-en {
  grid-column: 1; grid-row: 1;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700; font-size: 10px;
  letter-spacing: .1em; color: var(--ink-2);
  text-transform: uppercase; margin-bottom: 2px;
}
.gbn-scope .cat h4 {
  grid-column: 1; grid-row: 2;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 900; font-size: 18px;
  margin: 0; line-height: 1.2;
}
.gbn-scope .cat .arrow-mini {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  width: 28px; height: 28px;
  background: var(--ink); color: white;
  border: 2px solid var(--ink); border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 900;
  transition: transform .2s;
}
.gbn-scope .cat .arrow-mini::before { content: '→'; }
.gbn-scope .cat:hover .arrow-mini   { transform: rotate(-45deg); }

/* ═══════════════════════════════════════════════════════════
   カルーセル  .gbn-carousel
   ═══════════════════════════════════════════════════════════ */
.gbn-scope .gbn-carousel {
  position: relative;
  overflow: hidden;
  padding-bottom: 10px; /* box-shadow 5px 分の余白 */
}

.gbn-scope .gbn-carousel-track {
  display: flex;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

/* PC: 2枚同時表示。padding で隣のカードとの隙間を作る */
.gbn-scope .gbn-carousel-track .car-slide {
  flex: 0 0 50%;
  box-sizing: border-box;
  padding: 0 12px;
}

/* ナビゲーション行 */
.gbn-scope .gbn-car-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
}

/* 前へ/次へボタン */
.gbn-scope .gbn-car-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  background: white;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  font-size: 18px;
  font-weight: 900;
  color: var(--ink);
  font-family: inherit;
  transition: transform .12s, box-shadow .12s;
}
.gbn-scope .gbn-car-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ink);
}

/* ドット */
.gbn-scope .gbn-car-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gbn-scope .gbn-car-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  background: white;
  padding: 0;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.gbn-scope .gbn-car-dot.active {
  background: var(--shu);
  transform: scale(1.35);
}

/* SP: 1枚表示 */
@media (max-width: 767px) {
  .gbn-scope .gbn-carousel-track .car-slide {
    flex: 0 0 100%;
    padding: 0;
  }
}

/* ═══════════════════════════════════════════════════════════
   ページネーション  .gbn-pagination
   ═══════════════════════════════════════════════════════════ */
.gbn-scope .gbn-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
}

.gbn-scope .gbn-pagination a,
.gbn-scope .gbn-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 2.5px solid var(--ink);
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  color: var(--ink);
  background: white;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .12s, box-shadow .12s;
  white-space: nowrap;
}

.gbn-scope .gbn-pagination a:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ink);
  color: var(--ink);
  text-decoration: none;
}

.gbn-scope .gbn-pagination .current {
  background: var(--shu);
  color: white;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: default;
}

.gbn-scope .gbn-pagination .dots {
  border: none;
  box-shadow: none;
  background: transparent;
  color: var(--ink-2);
  font-weight: 700;
}

/* ─── レスポンシブ ────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .gbn-scope .staff-grid { grid-template-columns: 1fr; }
  .gbn-scope .staff-card .s-photo { width: 160px; }
}

@media (max-width: 980px) {
  .gbn-scope .job-grid   { grid-template-columns: 1fr; }
  .gbn-scope .cats       { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .gbn-scope .staff-card {
    flex-direction: column;
  }
  .gbn-scope .staff-card .s-photo {
    width: 100%;
    min-height: 200px;
  }
  .gbn-scope .staff-card .s-info {
    border-left: none;
  }
  .gbn-scope .cats { grid-template-columns: 1fr; }
}