/* 新卒採用ページ専用CSS */

/* ========================================
   ファーストビュー
   ======================================== */
.new-graduate-hero {
  position: relative;
  overflow: hidden;
  min-height: 55vh;
}

@media (min-width: 768px) {
  .new-graduate-hero {
    min-height: 100vh;
  }
}

/* ファーストビューのテキストシャドウ */
.new-graduate-hero h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* ========================================
   視差効果と背景画像
   ======================================== */
.parallax-bg {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100%;
  width: 100%;
}

/* モバイルではパララックス効果を無効化 */
@media (max-width: 768px) {
  .parallax-bg {
    background-attachment: scroll;
    background-size: 100% auto;
    background-position: center top;
  }
}

/* ========================================
   セクションアニメーション
   ======================================== */
#business .bg-white,
#attraction .bg-white,
#work .bg-white,
#interview .bg-white,
#welfare .bg-white,
#requirements .bg-white {
  transition: all 0.3s ease;
}

#business .bg-white:hover,
#attraction .bg-white:hover,
#work .bg-white:hover,
#interview .bg-white:hover,
#welfare .bg-white:hover,
#requirements .bg-white:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* ========================================
   CTAボタンとインタラクション
   ======================================== */
.new-graduate-hero .recruit-cta:hover {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

/* ========================================
   リストアイテムとコンテンツ
   ======================================== */
.business-list-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.business-list-dot {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  margin-top: 0.5rem;
  margin-right: 0.75rem;
  flex-shrink: 0;
}

/* BPOサービス枠のリストの◯の色を青系に */
.business-list-dot.bg-blue-500 {
  background-color: #3b82f6;
}

/* 人材サービス枠のリストの◯の色を緑系に */
.business-list-dot.bg-green-500 {
  background-color: #22c55e;
}

/* 障がい者雇用支援枠のリストの◯の色を黄色系に */
.business-list-dot.bg-yellow-500 {
  background-color: #eab308;
}

.business-list-text {
  line-height: 1.6;
}

/* アクセシビリティ対応 */
@media (prefers-reduced-motion: reduce) {

  .new-graduate-hero .recruit-cta:hover,
  #business .bg-white,
  #attraction .bg-white,
  #work .bg-white,
  #interview .bg-white,
  #welfare .bg-white,
  #requirements .bg-white {
    transition: none !important;
    transform: none !important;
  }

  .parallax-bg {
    background-attachment: scroll !important;
  }
}

/* フォーカス表示の改善 */
.recruit-cta:focus-visible {
  outline: 2px solid #f69381;
  outline-offset: 2px;
  border-radius: 4px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .new-graduate-hero h1 {
    font-size: 2rem;
  }

  #business .grid,
  #attraction .grid,
  #work .grid,
  #interview .grid {
    grid-template-columns: 1fr;
  }

  #welfare .grid {
    grid-template-columns: 1fr;
  }

  #requirements .grid {
    grid-template-columns: 1fr;
  }
}

/* 高コントラストモード対応 */
@media (prefers-contrast: high) {
  .bg-white\/95 {
    background-color: white !important;
  }

  .text-gray-600 {
    color: #374151 !important;
  }

  .text-gray-700 {
    color: #374151 !important;
  }
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
  .new-graduate-hero h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  }
}

/* ========================================
   セクション背景画像
   ======================================== */
/* 事業セクションの背景 */
.business-section-bg {
  background-image: url('../webp/newback3.webp');
}

/* 当社の魅力はここセクションの背景フェードイン */
.attraction-bg-slide {
  opacity: 0;
  will-change: opacity;
}

.attraction-bg-slide.fade-in {
  opacity: 0.8;
}

/* アクセシビリティ対応 */
@media (prefers-reduced-motion: reduce) {
  .attraction-bg-slide {
    opacity: 0.8 !important;
    transition: none !important;
  }
}

/* ========================================
   セクション固有のスタイル
   ======================================== */
/* お仕事セクションの背景色を確実に黄色系に */
#work {
  background: linear-gradient(to bottom right, #fefce8, #fed7aa);
}

/* 社員インタビューセクションの背景フェードイン */
.interview-section-bg-fade {
  opacity: 0;
  will-change: opacity;
}

.interview-section-bg-fade.fade-in {
  opacity: 0.8;
}

/* アクセシビリティ対応 */
@media (prefers-reduced-motion: reduce) {
  .interview-section-bg-fade {
    opacity: 0.8 !important;
    transition: none !important;
  }
}