/* =============================================
   trainee.css — 外国人材管理システム LP
   ============================================= */

/* --- カラー変数オーバーライド --- */
.trainee-page {
  --trainee-primary:    #1D4ED8;
  --trainee-primary-dk: #1E3A8A;
  --trainee-accent:     #0EA5E9;
  --trainee-teal:       #0D9488;
  --trainee-gold:       #D97706;
  --trainee-compliance: #7C3AED;
}

/* ===== Hero ===== */
.trainee-hero {
  background: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 60%, #0EA5E9 100%);
  padding: 80px 0 64px;
  color: #fff;
}
.trainee-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 768px) {
  .trainee-hero-inner { grid-template-columns: 1fr; }
  .trainee-hero-visual { display: none; }
}
.trainee-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  padding: 4px 16px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 16px;
  color: #fff;
}
.trainee-hero h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 900;
  line-height: 1.3;
  color: #fff;
  margin-bottom: 20px;
}
.trainee-hero h1 em {
  font-style: normal;
  color: #7DD3FC;
}
.trainee-hero-lead {
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(255,255,255,.9);
  margin-bottom: 32px;
}
.trainee-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.trainee-hero-visual {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trainee-stats-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
}
.trainee-stat-card {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
}
.trainee-stat-card .stat-num {
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.trainee-stat-card .stat-label {
  font-size: .7rem;
  color: rgba(255,255,255,.75);
  margin-top: 4px;
}
.trainee-law-note {
  background: rgba(255,255,255,.1);
  border-left: 3px solid #7DD3FC;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: .8rem;
  color: rgba(255,255,255,.9);
  line-height: 1.6;
}

/* ===== Pain ===== */
.trainee-pain {
  background: #F8FAFC;
  padding: 72px 0;
}
.trainee-pain-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.trainee-pain-item {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trainee-pain-item i {
  font-size: 1.6rem;
  color: var(--trainee-primary);
}
.trainee-pain-item p {
  font-size: .9rem;
  line-height: 1.7;
  color: #334155;
}
.trainee-pain-item strong { color: #0F172A; }

/* ===== Overview — 11モジュール ===== */
.trainee-overview {
  padding: 72px 0;
}
.trainee-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 32px;
}
.trainee-module-card {
  border-radius: 10px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .85rem;
  font-weight: 600;
  color: #fff;
}
.trainee-module-card i { font-size: 1.2rem; flex-shrink: 0; }
.trainee-module-card.is-core    { background: var(--trainee-primary); }
.trainee-module-card.is-ops     { background: var(--trainee-teal); }
.trainee-module-card.is-finance { background: #059669; }
.trainee-module-card.is-setting { background: #64748B; }
.trainee-module-note {
  text-align: center;
  font-size: .8rem;
  color: #64748B;
  margin-top: 16px;
}

/* ===== Quick Nav ===== */
.trainee-quick-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 48px;
}
.trainee-quick-nav a {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: #EFF6FF;
  color: var(--trainee-primary);
  font-size: .82rem;
  font-weight: 600;
  border: 1px solid #BFDBFE;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.trainee-quick-nav a:hover {
  background: var(--trainee-primary);
  color: #fff;
  border-color: transparent;
}

/* ===== Features ===== */
.trainee-features {
  background: #F8FAFC;
  padding: 72px 0;
}
/* construction.css の crm-feature をそのまま流用 */
/* 色だけ上書き */
.trainee-page .crm-feature-num {
  color: var(--trainee-primary);
  border-color: var(--trainee-primary);
}
.trainee-page .crm-feature-list li i {
  color: var(--trainee-primary);
}

/* ===== Compliance CTA ===== */
.trainee-compliance {
  background: linear-gradient(135deg, #1E1B4B 0%, #312E81 100%);
  padding: 72px 0;
  color: #fff;
}
.trainee-compliance-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 768px) {
  .trainee-compliance-inner { grid-template-columns: 1fr; }
}
.trainee-compliance h2 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 900;
  line-height: 1.4;
  color: #fff;
  margin-bottom: 16px;
}
.trainee-compliance h2 em {
  font-style: normal;
  color: #A5B4FC;
}
.trainee-compliance p {
  font-size: .95rem;
  line-height: 1.8;
  color: rgba(255,255,255,.85);
  margin-bottom: 16px;
}
.trainee-compliance-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trainee-compliance-card {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.trainee-compliance-card i {
  font-size: 1.2rem;
  color: #A5B4FC;
  flex-shrink: 0;
  margin-top: 2px;
}
.trainee-compliance-card .card-body strong {
  display: block;
  font-size: .9rem;
  color: #fff;
  margin-bottom: 2px;
}
.trainee-compliance-card .card-body span {
  font-size: .8rem;
  color: rgba(255,255,255,.7);
}

/* ===== Pricing ===== */
.trainee-pricing {
  padding: 72px 0;
}
.trainee-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.trainee-plan {
  border: 2px solid #E2E8F0;
  border-radius: 16px;
  padding: 28px 24px;
  background: #fff;
  position: relative;
  transition: box-shadow .2s;
}
.trainee-plan:hover { box-shadow: 0 8px 24px rgba(29,78,216,.1); }
.trainee-plan.is-featured {
  border-color: var(--trainee-primary);
  box-shadow: 0 8px 32px rgba(29,78,216,.18);
}
.trainee-plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--trainee-primary);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.trainee-plan-label {
  font-size: .8rem;
  font-weight: 700;
  color: var(--trainee-primary);
  letter-spacing: .05em;
  margin-bottom: 4px;
}
.trainee-plan-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 8px;
}
.trainee-plan-capacity {
  font-size: .85rem;
  color: #64748B;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #E2E8F0;
}
.trainee-plan-price {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--trainee-primary);
  line-height: 1;
  margin-bottom: 4px;
}
.trainee-plan-price sup { font-size: 1rem; }
.trainee-plan-price sub { font-size: .85rem; font-weight: 400; color: #64748B; }
.trainee-plan-setup {
  font-size: .78rem;
  color: #94A3B8;
  margin-bottom: 20px;
}
.trainee-plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .83rem;
  color: #334155;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.trainee-plan-features li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.trainee-plan-features li i { color: #22C55E; flex-shrink: 0; }
.trainee-pricing-note {
  text-align: center;
  font-size: .82rem;
  color: #64748B;
  margin-top: 24px;
  line-height: 1.8;
}

/* ===== Summary ===== */
.trainee-summary {
  background: #F8FAFC;
  padding: 72px 0;
}
.trainee-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.trainee-summary-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  border-top: 4px solid var(--trainee-primary);
}
.trainee-summary-card h3 {
  font-size: 1rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.trainee-summary-card h3 i { color: var(--trainee-primary); }
.trainee-summary-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .85rem;
  color: #334155;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.trainee-summary-card ul li::before {
  content: "✓ ";
  color: var(--trainee-primary);
  font-weight: 700;
}

/* ===== CTA ===== */
.trainee-cta {
  padding: 72px 0;
}
.trainee-cta-box {
  background: linear-gradient(135deg, #1D4ED8, #0EA5E9);
  border-radius: 20px;
  padding: 56px 40px;
  text-align: center;
  color: #fff;
}
.trainee-cta-box h2 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: 12px;
}
.trainee-cta-box p {
  font-size: .95rem;
  color: rgba(255,255,255,.9);
  margin-bottom: 32px;
  line-height: 1.8;
}
.trainee-cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== 専用問い合わせフォームセクション ===== */
.trainee-contact-section {
  background: #F8FAFC;
  padding: 80px 0;
}

/* バナー部分 */
.trainee-contact-banner {
  background: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 60%, #0EA5E9 100%);
  border-radius: 20px;
  padding: 48px 48px 40px;
  color: #fff;
  margin-bottom: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 768px) {
  .trainee-contact-banner { grid-template-columns: 1fr; padding: 32px 24px; }
}
.trainee-contact-banner h2 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 12px;
}
.trainee-contact-banner h2 em {
  font-style: normal;
  color: #7DD3FC;
}
.trainee-contact-banner-inner p {
  font-size: .9rem;
  line-height: 1.9;
  color: rgba(255,255,255,.88);
}
.trainee-contact-merit {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.trainee-contact-merit-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  padding: 14px 16px;
}
.trainee-contact-merit-item i {
  font-size: 1.2rem;
  color: #7DD3FC;
  flex-shrink: 0;
  margin-top: 2px;
}
.trainee-contact-merit-item strong {
  display: block;
  font-size: .88rem;
  color: #fff;
  margin-bottom: 2px;
}
.trainee-contact-merit-item span {
  font-size: .78rem;
  color: rgba(255,255,255,.75);
  line-height: 1.5;
}

/* フォームラップ */
.trainee-contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 768px) {
  .trainee-contact-wrap { grid-template-columns: 1fr; }
}

/* 左：情報パネル */
.trainee-contact-info {
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  border: 1px solid #E2E8F0;
}
.trainee-contact-info h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 10px;
}
.trainee-contact-info > p {
  font-size: .88rem;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 20px;
}
.trainee-contact-tel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.trainee-contact-tel i { color: var(--trainee-primary); font-size: 1.1rem; }
.trainee-contact-tel a {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--trainee-primary);
  text-decoration: none;
}
.trainee-contact-tel a:hover { text-decoration: underline; }
.trainee-contact-hours {
  font-size: .78rem;
  color: #94A3B8;
  margin-bottom: 16px;
  padding-left: 30px;
}
.trainee-contact-mail {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.trainee-contact-mail i { color: var(--trainee-primary); }
.trainee-contact-mail a {
  font-size: .9rem;
  color: var(--trainee-primary);
  text-decoration: none;
}
.trainee-contact-mail a:hover { text-decoration: underline; }

/* チェックリスト */
.trainee-contact-checklist {
  border-top: 1px solid #E2E8F0;
  padding-top: 20px;
}
.trainee-contact-checklist-title {
  font-size: .82rem;
  font-weight: 700;
  color: #64748B;
  margin-bottom: 10px;
}
.trainee-contact-checklist ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.trainee-contact-checklist ul li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .82rem;
  color: #334155;
  line-height: 1.5;
}
.trainee-contact-checklist ul li i {
  color: var(--trainee-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

/* 右：フォームパネル */
.trainee-contact-form-wrap {
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 24px rgba(29,78,216,.08);
}
.trainee-contact-form-wrap h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--trainee-primary);
}

/* ===== Mock UI — 研修生一覧 ===== */
.trainee-mock {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  font-size: .82rem;
}
.trainee-mock-header {
  background: var(--trainee-primary);
  color: #fff;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}
.trainee-mock-header-badge {
  background: rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .75rem;
}
.trainee-mock-body { padding: 8px; }
.trainee-mock-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
}
.trainee-mock-row:nth-child(even) { background: #F8FAFC; }
.trainee-mock-name { flex: 1; font-weight: 500; color: #0F172A; }
.trainee-mock-company { font-size: .75rem; color: #64748B; min-width: 100px; }
.trainee-mock-status {
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.trainee-mock-status.is-active  { background: #DCFCE7; color: #16A34A; }
.trainee-mock-status.is-end     { background: #F1F5F9; color: #64748B; }
.trainee-mock-status.is-visa    { background: #FEF9C3; color: #A16207; }
.trainee-mock-expire {
  font-size: .72rem;
  color: #94A3B8;
  min-width: 80px;
  text-align: right;
}

/* ===== Mock UI — 訪問記録 ===== */
.trainee-mock-visit { }
.trainee-mock-visit .visit-header {
  background: var(--trainee-teal);
  color: #fff;
  padding: 10px 16px;
  font-weight: 600;
  font-size: .82rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.trainee-mock-visit .visit-body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.trainee-mock-visit .visit-row {
  display: flex;
  gap: 8px;
}
.trainee-mock-visit .visit-label {
  font-size: .72rem;
  color: #64748B;
  min-width: 80px;
  font-weight: 600;
}
.trainee-mock-visit .visit-value {
  font-size: .82rem;
  color: #0F172A;
}
.trainee-mock-visit .visit-law {
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: .75rem;
  color: #9A3412;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ===== Mock UI — 請求書 ===== */
.trainee-mock-invoice {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  font-size: .82rem;
}
.trainee-mock-invoice-header {
  background: #059669;
  color: #fff;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}
.trainee-mock-invoice-total {
  font-size: 1.1rem;
  font-weight: 900;
}
.trainee-mock-invoice-body { padding: 12px; }
.trainee-mock-invoice-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid #F1F5F9;
}
.trainee-mock-invoice-line:last-child { border-bottom: none; }
.trainee-mock-invoice-line-name { color: #334155; }
.trainee-mock-invoice-line-amt { font-weight: 600; color: #0F172A; }
.trainee-mock-invoice-footer {
  background: #F0FDF4;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  font-weight: 800;
  color: #059669;
  font-size: .9rem;
}

/* ===== Mock UI — 会計 ===== */
.trainee-mock-account {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  font-size: .82rem;
}
.trainee-mock-account-header {
  background: #374151;
  color: #fff;
  padding: 10px 16px;
  font-weight: 600;
  font-size: .82rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.trainee-mock-account-body { padding: 8px; }
.trainee-mock-account-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: .78rem;
}
.trainee-mock-account-row:nth-child(even) { background: #F8FAFC; }
.trainee-mock-account-date { color: #64748B; min-width: 64px; }
.trainee-mock-account-desc { flex: 1; color: #334155; }
.trainee-mock-account-debit { color: #DC2626; min-width: 72px; text-align: right; font-weight: 600; }
.trainee-mock-account-credit { color: #16A34A; min-width: 72px; text-align: right; font-weight: 600; }

/* ===== Mock UI — 宿舎 ===== */
.trainee-mock-house {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.trainee-mock-room {
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}
.trainee-mock-room-num {
  font-weight: 800;
  font-size: .85rem;
  color: #0F172A;
  margin-bottom: 4px;
}
.trainee-mock-room-capacity {
  font-size: .72rem;
  color: #64748B;
  margin-bottom: 8px;
}
.trainee-mock-room-occupants {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.trainee-mock-room-person {
  font-size: .72rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: #EFF6FF;
  color: var(--trainee-primary);
  font-weight: 500;
}
.trainee-mock-room.is-vacant { background: #F0FDF4; border-color: #BBF7D0; }
.trainee-mock-room.is-vacant .trainee-mock-room-num { color: #16A34A; }

/* ===== Breadcrumb ===== */
.trainee-breadcrumb {
  font-size: .82rem;
  color: #94A3B8;
  padding: 14px 0;
}
.trainee-breadcrumb a {
  color: var(--trainee-primary);
  text-decoration: none;
}
.trainee-breadcrumb a:hover { text-decoration: underline; }