/* 採用ページ専用（共通デザインは ../css/style.css） */

/* hero photo collage */
.collage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:520px;margin-left:auto}
.collage figure{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:#0F4268;opacity:0;transform:translateY(32px);animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) forwards}
.collage figure:nth-child(2),.collage figure:nth-child(4){margin-top:40px}
.collage img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08);animation:floatImg 7s ease-in-out infinite alternate}
@keyframes floatImg{from{transform:scale(1.08) translateY(4px)}to{transform:scale(1.08) translateY(-8px)}}
.collage figure:nth-child(2) img{animation-delay:-2s}
.collage figure:nth-child(3) img{animation-delay:-4s}
.collage figure:nth-child(4) img{animation-delay:-6s}

/* badges */
.badge{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);font-size:14px;font-weight:700;white-space:nowrap}
.badge svg{flex-shrink:0}

/* why-us rows */
.why-row{display:flex;flex-wrap:wrap;align-items:center;gap:40px 72px}
.why-row.reverse{flex-direction:row-reverse}
.why-num{font-family:'Montserrat',sans-serif;font-size:96px;font-weight:800;line-height:1;color:#E3E9EF}

/* application steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;position:relative}
.steps li{position:relative;background:#FFFFFF;border-radius:16px;padding:28px 20px;text-align:center}
.steps li:not(:last-child)::after{content:"";position:absolute;top:50%;right:-14px;width:12px;height:12px;border-top:2px solid #0274BE;border-right:2px solid #0274BE;transform:translateY(-50%) rotate(45deg)}
.step-no{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:999px;background:#032C49;color:#FFFFFF;font-family:'Montserrat',sans-serif;font-weight:700;margin-bottom:14px}

/* application form */
.form-frame{display:block;width:100%;height:1480px;border:0;background:#FFFFFF}

@media (prefers-reduced-motion: reduce){
  .collage figure{opacity:1;transform:none}
}

@media (max-width: 960px){
  .steps{grid-template-columns:1fr;gap:20px}
  .steps li{display:flex;align-items:center;gap:16px;text-align:left;padding:20px}
  .steps li .step-no{margin:0;flex-shrink:0}
  .steps li:not(:last-child)::after{top:auto;bottom:-16px;right:auto;left:42px;transform:rotate(135deg)}
}
@media (max-width: 767px){
  .collage{max-width:none;margin:0;gap:10px}
  .collage figure:nth-child(2),.collage figure:nth-child(4){margin-top:24px}
  .why-num{font-size:64px}
  .form-frame{height:1700px}
  .badge{font-size:13px;padding:8px 14px}
}