/* ====== S-Build Recruiting (Unified) — final ====== */
/* Put this file last. It unifies card size, alignment, and responsiveness. */

:root{
  /* brand & base */
  --pink:#ff6bd6;
  --purple:#7a5cff;
  --blue:#4db3ff;
  --brand:#e60012;
  --text:#1f2330;
  --muted:#6b7280;
  --card:#ffffff;
  --shadow: 0 6px 18px rgba(17, 24, 39, .08);
  --shadow-lg: 0 18px 38px rgba(17, 24, 39, .15);
  --radius: 16px;

  /* unified card sizing (compact) */
--card-min-width: 260px;   /* 幅を少し狭く */
--card-min-height: 190px;  /* 高さも少し低く */
--card-gap: 24px;          /* 間隔を少し詰める */

}

/* container helpers */
.entry-container{max-width:1120px;margin:0 auto;padding:0 20px}

/* ===== hero (kept minimal) ===== */
.entry-hero{
  margin-top: 7vw; position:relative; isolation:isolate; overflow:hidden;
  padding:56px 0 56px;
  background: linear-gradient(135deg, rgba(230,0,18,0.2), rgba(255,90,90,0.25));
}
.entry-hero__bg .blob{
  position:absolute; filter: blur(40px); opacity:.55; transform: translate(-50%, -50%);
  width: 520px; height: 520px; border-radius: 50%;
  mix-blend-mode: multiply; animation: float 12s ease-in-out infinite alternate;
}
.blob.b1{ left: 10%; top: 10%; background: radial-gradient(circle at 30% 30%, #ff4b4b, #ff7a7a); }
.blob.b2{ left: 85%; top: 15%; background: radial-gradient(circle at 60% 40%, #ffb3b3, #ff6b6b); animation-delay: .8s }
.blob.b3{ left: 55%; top: 75%; background: radial-gradient(circle at 40% 60%, #ffa3a3, #e60012); animation-delay: 1.6s }
@keyframes float{ to{ transform: translate(-45%, -48%) scale(1.08)} }

.entry-hero__content{ position:relative; z-index:2; text-align:center; }
.entry-hero .eyebrow{ color:#fff; font-weight:700; letter-spacing:.08em; text-shadow:0 2px 10px rgba(0,0,0,.18); margin:0 }
.entry-hero h1{ margin:.2rem 0 1.2rem; font-size: clamp(36px, 5.5vw, 64px); color:#fff; letter-spacing:.16em; text-shadow:0 8px 30px rgba(0,0,0,.35); }

.tab-rail{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:8px }
.tab{ display:inline-block; padding:12px 18px; border-radius:999px; font-weight:800; text-decoration:none;
  color:#fff; background: rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35); backdrop-filter: blur(6px);
  transition: transform .15s ease, background .15s ease; }
.tab:hover{ transform: translateY(-2px); background: rgba(255,255,255,.28)}

.entry-main{ padding: 36px 5vw 20px; background:#fff; }

/* ===== year blocks ===== */
.year-block{ padding:48px 0 20px; }
.year-title{ font-size: clamp(24px, 3.1vw, 32px); font-weight:900; letter-spacing:.02em; margin:0 0 14px; color:#111; }
.year-block.-pink .year-title{ color:#ff4bba } .year-block.-blue .year-title{ color:#3ca4ff }

/* ===== cards (unified & compact) ===== */

.job-card{
  width:100%;
  min-height: var(--card-min-height);
  background:#fff;
  border:1px solid #eee;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding: 18px 16px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.job-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.job-title{ font-size: 1rem; font-weight:900; color:#222; margin:.2rem 0 .4rem }
.job-loc{ font-size:.88rem; color:#6b7280; margin:.1rem 0 .5rem }

.underline{
  display:block; height:4px; width:34%; border-radius:4px; margin:.4rem auto 1rem;
  background: linear-gradient(90deg, #ff6bd6, #e60012); opacity:.9; transition: width .25s ease;
}
.year-block.-blue .underline{ background: linear-gradient(90deg, #4db3ff, #7a5cff) }
.job-card:hover .underline{ width:54%; }

/* CTA — compact, single-line, bottom-anchored */
.job-card .cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 20px; min-height:44px; font-size:15px;
  border-radius:999px; white-space:nowrap; writing-mode: horizontal-tb;
  color:#fff; background: linear-gradient(135deg, #ff6bd6, #7a5cff);
  box-shadow: 0 10px 24px rgba(122,92,255,.28);
  font-weight:900; margin-top:auto;
}

.year-block.-blue .cta{ background: linear-gradient(135deg, #4db3ff, #7a5cff) }

.cta:hover{ transform: translateY(-2px); filter:brightness(.98) }
.cta svg{ width:18px; height:18px; transition: transform .2s ease } .cta:hover svg{ transform: translateX(2px) }

/* ===== desktop layout rules ===== */
/* PC: 
   - 3枚以上の .jobs は 3カラム固定
   - 2枚の .jobs は 2カラムで中央寄せ（左右端に行かない）
   - 1枚は中央
*/

/* ===== tablet: 2-up ===== */
@media (max-width: 900px){
  .jobs{ grid-template-columns: repeat(2, minmax(240px, 1fr)); --card-min-height: 200px; }
  .job-title{ font-size: .98rem }
}

/* ===== mobile: 1-up ===== */
@media (max-width: 600px){
  .jobs{ grid-template-columns: 1fr; --card-min-width: 260px; --card-gap: 22px; --card-min-height: 196px; }
  .job-card{ padding: 16px 14px }
  .job-card .cta{ padding: 10px 18px; min-height: 42px; font-size: 14.5px }
}
/* === どのブロックでもカード幅を統一（2枚の時も広がらない） === */
:root{
  --card-max-width: 320px; /* 3カラム時の1枚の見た目幅に合わせる。好みで 300~340px */
}

/* カード自体の最大幅を固定。列数に関係なく同じサイズで表示 */
.jobs{
  justify-content: center;   /* 中央寄せ */
  justify-items: center;     /* 各セル内でも中央に */
}
.job-card{
  max-width: var(--card-max-width);
  width: 100%;               /* ただしスマホでは自然に縮む */
}


/* 2027年卒の「お申し込み」ボタン（-pinkブロック）を赤系グラデーションに変更 */
.year-block.-pink .cta {
  background: linear-gradient(135deg, #ff4b4b 0%, #ff7a7a 40%, #ffb3b3 100%);
  box-shadow: 0 10px 24px rgba(230, 0, 18, .25);
  color: #fff;
  transition: all .25s ease;
}

/* ======================================
   カード配置調整
   - 3枚以上：均等配置
   - 2枚のみ：左揃え
   - スマホ：1枚
====================================== */

.jobs {
  display: grid;
  gap: 20px; /* 余白（大きい場合は16pxなどに調整） */
  justify-content: center; /* 基本は中央 */
  justify-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

/* --- 2枚のときは左揃え --- */
.jobs:has(.job-card:nth-child(2):last-child) {
  justify-content: start;
}

/* --- スマホでは1枚表示 --- */
@media screen and (max-width: 768px) {
  .jobs {
    grid-template-columns: 1fr;
    gap: 16px;
    justify-content: center;
  }
}


/* カード幅は現在のまま（必要なら数値だけ変えてOK） */
:root{
  --card-fixed-width: 320px; /* 今のカード幅に合わせて 300〜340px 程度で調整 */
}

/* 中央の箱は外す（任意） */
.year-block .entry-container{
  max-width: none !important;
  padding-inline: clamp(16px, 4vw, 32px);
}

/* カードコンテナ：カードは固定幅のまま左揃えで折り返し */
.grid.jobs{
  display: grid;
  /* 1fr を使わず、カード幅を固定して詰める */
  grid-template-columns: repeat(auto-fill, minmax(var(--card-fixed-width), var(--card-fixed-width)));
  gap: 16px;                         /* 余白はお好みで 12–20px */
  justify-content: flex-start;       /* 左揃え */
  justify-items: start;
  width: 100%;
  max-width: none !important;        /* 横幅制限を解除（箱をなくす） */
  margin: 0;              /* 中央寄せを解除 */
}

/* 念のためカード自体も固定幅に */
.job-card{
  width: var(--card-fixed-width);
  max-width: var(--card-fixed-width);
}

/* スマホは1列表示（必要に応じて） */
@media (max-width: 768px){
  .grid.jobs{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .job-card{
    width: 100%;
    max-width: 100%;
  }
}