/* Hero Section 専用CSS */



/* エントリーセクション（3つの白正方形枠）のモバイル調整 */
@media (max-width: 767px) {
  html body .section-4 .entry-card {
    aspect-ratio: 4/3 !important;
    height: auto !important;
    max-height: 200px !important;
    min-height: unset !important;
    width: 100% !important;
  }

  html body .section-4 .entry-card h3 {
    font-size: 1.25rem !important;
    margin-bottom: 0.5rem !important;
  }
}

/* 新着情報下部のエントリーボタン3つのモバイル調整 */
@media (max-width: 767px) {
  .company-know-buttons {
    aspect-ratio: 16/9 !important;
    height: auto !important;
    max-height: 120px !important;
  }

  .company-know-buttons img {
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* せり上がりセクションのスタイル */
.parallax-content-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 10;
  background: transparent;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* モバイルでは第一せり上がりを階層の下に配置 */
@media (max-width: 767px) {
  .parallax-content-section {
    z-index: 1 !important;
    pointer-events: none !important;
  }

  /* モバイルではスライダーが第一せり上がりの上に表示されるように */
  .feature-slider {
    z-index: 50 !important;
    position: relative !important;
  }
}

.parallax-content {
  pointer-events: auto;
  max-width: 100%;
  width: 100%;
  /* GSAPで制御するため、初期状態は非表示 */
  opacity: 0;
  transform: translateY(100px);
}

.parallax-content-section-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  /* ファーストビューの上に重ねて表示 */
  z-index: 5;
  pointer-events: none;
}

.parallax-content-2 {
  pointer-events: auto;
  max-width: 100%;
  width: 100%;
  /* GSAPで制御するため、初期状態は非表示 */
  opacity: 0;
  /* ベースと同じ階層でスクロールするため、transformは設定しない */
  /* 第二せり上がりを中央に配置 */
  position: relative;
  z-index: 5;
}

/* フィーチャーカードのアニメーション */
.feature-card {
  /* GSAPで制御するため、CSSアニメーションは削除 */
}

/* モバイルフェードスライダー用スタイル */
.feature-slider-fade {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.feature-card-mobile-fade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}

.feature-card-mobile-fade.active {
  opacity: 1;
  pointer-events: auto;
}

.feature-card-mobile-fade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
}

/* スライダードット用スタイル */
.slider-dot {
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.slider-dot:hover {
  background-color: #f69381 !important;
}

.slider-dot:active {
  transform: scale(0.95);
}

/* レスポンシブ調整 */
@media (max-width: 767px) {
  .feature-slider-fade {
    height: 350px;
  }

  @media (max-height: 680px) {
    .feature-slider-fade {
      height: 300px;
    }

    .feature-card-mobile-fade .bg-white\/60 {
      padding: 0.75rem;
    }

    .feature-card-mobile-fade h3 {
      font-size: 1rem;
      margin-bottom: 0.5rem;
    }

    .feature-card-mobile-fade p {
      font-size: 0.875rem;
      line-height: 1.4;
    }
  }
}

/* 波背景の位置調整 */
.custom-wave-fix {
  position: relative;
}

/* スクロール用スペース */
.scroll-space {
  height: 150vh;
  /* 1.5画面分のスクロール */
  width: 100%;
  /* リサイズ時の空白を防ぐ */
  min-height: 100vh;
  max-height: 200vh;
  /* レスポンシブ対応 */
  transition: height 0.3s ease;
}

/* 画面サイズ変更時の調整 */
@media (max-width: 767px) {
  .scroll-space {
    height: 120vh;
    /* モバイルでは少し短く */
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .scroll-space {
    height: 140vh;
    /* タブレットでは中間 */
  }
}

/* レスポンシブ対応 */
@media (max-width: 767px) {
  .parallax-content-section {
    padding: 0 1rem;
  }

  .parallax-content,
  .parallax-content-2 {
    text-align: center;
  }
}

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

  .parallax-content,
  .parallax-content-2,
  .feature-card,
  .feature-card-mobile {
    transition: none !important;
    animation: none !important;
  }
}

/* バナー表示制御 */
.mobile-cta-buttons {
  display: none;
}

.hero-banners {
  display: none;
}

@media (max-width: 767px) {
  .mobile-cta-buttons {
    display: flex;
  }

  .hero-banners {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .mobile-cta-buttons {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-banners {
    display: flex !important;
  }
}

@media (min-width: 1024px) {
  .hero-banners {
    display: flex !important;
  }
}

/* サイズ2（769px〜1024px）での画像サイズ調整 */
@media (min-width: 769px) and (max-width: 1024px) {
  .parallax-content .parallax-title img {
    max-width: 208px !important;
    width: auto !important;
    height: auto !important;
  }

  .parallax-content .parallax-title {
    justify-content: center !important;
    margin-bottom: 2rem !important;
  }

  .parallax-content .parallax-body {
    margin-top: 1.5rem !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .parallax-content {
    text-align: center !important;
  }

  .parallax-content>div {
    flex-direction: column !important;
    align-items: center !important;
  }

  /* サイズ2でのフィーチャーカードサイズ調整 */
  .feature-card {
    aspect-ratio: 1/1 !important;
    /* 正方形に戻す */
    min-height: 280px !important;
    /* サイズを調整 */
  }

  /* サイズ2でのフィーチャーカードテキストエリア調整 */
  .feature-card .bg-white\/60 {
    padding: 1rem !important;
    height: 80px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    /* サイズ2では初期状態で閉じている（タイトルのみ表示、中央揃え） */
  }

  .feature-card .bg-white\/60 p {
    font-size: 0.875rem !important;
    /* 14px - サイズ2のみ */
    line-height: 1.4 !important;
    /* 詰め気味の行間 */
    overflow: hidden !important;
    max-height: 60px !important;
  }

  /* サイズ2で開いた状態 */
  .feature-card .bg-white\/60.expanded {
    height: auto !important;
    overflow: visible !important;
    max-height: none !important;
  }

  .feature-card .bg-white\/60.expanded p {
    overflow: visible !important;
    max-height: none !important;
  }

  /* サイズ2では確実に初期状態で閉じている */
  html body .parallax-content-2 .feature-card .bg-white\/60 {
    height: 80px !important;
    overflow: hidden !important;
    max-height: 80px !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    position: relative !important;
    /* タイトルのみ表示（中央揃え） */
  }

  /* サイズ2で閉じている時の上向き矢印 */
  html body .parallax-content-2 .feature-card .bg-white\/60:not(.expanded)::after {
    content: '▼' !important;
    position: absolute !important;
    right: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 0.875rem !important;
    color: #555555 !important;
    pointer-events: none !important;
  }

  /* サイズ2で開いている時は矢印を非表示 */
  html body .parallax-content-2 .feature-card .bg-white\/60.expanded::after {
    content: none !important;
  }

  html body .parallax-content-2 .feature-card .bg-white\/60 p {
    overflow: hidden !important;
    max-height: 0px !important;
    opacity: 0 !important;
    /* 本文は非表示 */
  }

  /* サイズ2で開いた状態（最高優先度） */
  html body .parallax-content-2 .feature-card .bg-white\/60.expanded {
    height: auto !important;
    overflow: visible !important;
    max-height: none !important;
    width: auto !important;
  }

  html body .parallax-content-2 .feature-card .bg-white\/60.expanded p {
    overflow: visible !important;
    max-height: none !important;
    opacity: 1 !important;
  }

  /* サイズ2でのスライダー調整 */
  .feature-card-mobile-fade {
    aspect-ratio: 1/1 !important;
    min-height: 250px !important;
  }

  .feature-card-mobile-fade img {
    object-fit: cover !important;
    object-position: top 20px !important;
  }
}

/* サイズ3（1025px〜1200px）での画像サイズ調整 */
@media (min-width: 1025px) and (max-width: 1200px) {
  .parallax-content .parallax-title img {
    max-width: 208px !important;
    width: auto !important;
    height: auto !important;
  }

  .parallax-content .parallax-title {
    justify-content: flex-start !important;
    margin-bottom: 1rem !important;
  }

  .parallax-content .parallax-body {
    margin-top: 0.5rem !important;
    max-width: 37rem !important;
    /* 592px - 80px追加 */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .parallax-content {
    text-align: left !important;
  }

  .parallax-content>div {
    flex-direction: row !important;
    align-items: flex-start !important;
  }

  /* サイズ3でのフィーチャーカードテキストエリア調整 */
  .feature-card .bg-white\/60 {
    height: 80px !important;
    overflow: hidden !important;
    max-height: 80px !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    /* サイズ3では初期状態で閉じている（タイトルのみ表示、中央揃え） */
  }

  /* サイズ3でのフィーチャーカードテキストサイズ */
  body .parallax-content-2 .feature-card .bg-white\/60 p {
    font-size: 1rem !important;
    /* 16px */
    line-height: 1.6 !important;
    overflow: hidden !important;
    max-height: 60px !important;
    opacity: 1 !important;
  }

  /* サイズ3で開いた状態 */
  .feature-card .bg-white\/60.expanded {
    height: auto !important;
    overflow: visible !important;
    max-height: none !important;
    width: auto !important;
  }

  .feature-card .bg-white\/60.expanded p {
    overflow: visible !important;
    max-height: none !important;
    opacity: 1 !important;
  }

  /* サイズ3では確実に初期状態で閉じている */
  html body .parallax-content-2 .feature-card .bg-white\/60 {
    height: 80px !important;
    overflow: hidden !important;
    max-height: 80px !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    position: relative !important;
    /* タイトルのみ表示（中央揃え） */
  }

  /* サイズ3で閉じている時の上向き矢印 */
  html body .parallax-content-2 .feature-card .bg-white\/60:not(.expanded)::after {
    content: '▼' !important;
    position: absolute !important;
    right: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 0.875rem !important;
    color: #555555 !important;
    pointer-events: none !important;
  }

  /* サイズ3で開いている時は矢印を非表示 */
  html body .parallax-content-2 .feature-card .bg-white\/60.expanded::after {
    content: none !important;
  }

  html body .parallax-content-2 .feature-card .bg-white\/60 p {
    overflow: hidden !important;
    max-height: 0px !important;
    opacity: 0 !important;
    /* 本文は非表示 */
  }

  /* サイズ3で開いた状態（最高優先度） */
  html body .parallax-content-2 .feature-card .bg-white\/60.expanded {
    height: auto !important;
    overflow: visible !important;
    max-height: none !important;
    width: auto !important;
  }

  html body .parallax-content-2 .feature-card .bg-white\/60.expanded p {
    overflow: visible !important;
    max-height: none !important;
    opacity: 1 !important;
  }
}

/* サイズ4（1201px以上）での画像サイズ調整 */
@media (min-width: 1201px) {
  .parallax-content .parallax-title img {
    max-width: 224px !important;
    width: auto !important;
    height: auto !important;
  }

  /* サイズ4でのフィーチャーカードテキストエリア固定サイズ */
  .feature-card .bg-white\/60 {
    width: 100% !important;
    height: 200px !important;
  }

  /* サイズ4でのテキスト表示確保 */
  body .parallax-content-2 .feature-card .bg-white\/60 p {
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
    font-size: 1rem !important;
    /* 16px */
    line-height: 1.6 !important;
  }

  /* 1201px〜1280pxでの調整 */
  @media (min-width: 1201px) and (max-width: 1280px) {
    .feature-card {
      aspect-ratio: 4/5 !important;
      /* 横長にする */
    }

    .feature-card .bg-white\/60 {
      width: 100% !important;
      height: 240px !important;
      /* 1280px以下では高さ固定 */
    }
  }
}

/* モバイルファーストのレスポンシブ調整 */
@media (max-width: 767px) {
  .mobile-hero-content {
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 第一せり上がりの全体レイアウト */
  .parallax-content {
    text-align: center !important;
  }

  .parallax-content>div {
    flex-direction: column !important;
    align-items: center !important;
  }
}

/* サイズ2（769px〜1024px）でのテキストサイズ調整 */
@media (min-width: 769px) and (max-width: 1024px) {
  .parallax-content .parallax-body {
    font-size: 1.125rem !important;
    /* 18px */
    line-height: 1.8 !important;
    margin-top: 1.5rem !important;
  }

  /* サイズ2でのアブストラクトオブジェクト調整 */
  .about-company-section .grid {
    gap: 1rem !important;
  }

  .about-company-section .grid>a {
    padding: 0.5rem !important;
  }

  .about-company-section .grid>a>div {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
  }

  .about-company-section .grid>a>div>img {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
  }

  /* サイズ2でのテキストサイズ調整 */
  .about-company-section .grid>a h3 {
    font-size: 0.875rem !important;
    /* 14px */
  }

  .about-company-section .grid>a p {
    font-size: 0.75rem !important;
    /* 12px */
  }

  .about-company-section .grid>a span {
    font-size: 0.875rem !important;
    /* 14px */
  }
}

/* サイズ3（1025px〜1200px）でのテキストサイズ調整 */
@media (min-width: 1025px) and (max-width: 1200px) {
  .parallax-content .parallax-body {
    font-size: 1.125rem !important;
    /* 18px */
    line-height: 1.8 !important;
    margin-top: 1.5rem !important;
  }

  /* サイズ3でのアブストラクトオブジェクト調整 */
  .about-company-section .grid {
    gap: 1.5rem !important;
  }

  .about-company-section .grid>a {
    padding: 0.75rem !important;
  }

  .about-company-section .grid>a>div {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
  }

  .about-company-section .grid>a>div>img {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
  }
}

/* モバイルの画面高さが低い場合の調整 */
@media (max-height: 700px) and (max-width: 768px) {
  .parallax-content .parallax-title img {
    max-width: 160px !important;
    width: auto !important;
    height: auto !important;
  }

  .parallax-content .parallax-body {
    font-size: 0.875rem !important;
    /* 14px */
    line-height: 1.6 !important;
    margin-top: 1rem !important;
  }

  .parallax-content .parallax-title {
    margin-bottom: 1rem !important;
  }

  /* 第二せり上がりの調整 */
  .parallax-content-2 .parallax-title img {
    max-width: 140px !important;
    width: auto !important;
    height: auto !important;
  }

  /* フィーチャーカードの高さ調整 */
  .feature-card-mobile {
    height: 350px !important;
  }

  /* 第二せり上がりのタイトル文章調整 */
  .parallax-content-2 h2 {
    font-size: 1rem !important;
    /* 16px */
    margin-bottom: 1rem !important;
  }

  /* 第二せり上がりの全体余白調整 */
  .parallax-content-2 {
    padding: 1rem 0 !important;
  }

  .parallax-content-2 .container {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

/* モバイルの画面高さが非常に低い場合の調整 */
@media (max-height: 600px) and (max-width: 768px) {

  /* 第一せり上がりの調整 */
  .parallax-content .parallax-title img {
    max-width: 120px !important;
  }

  .parallax-content .parallax-body {
    font-size: 0.75rem !important;
    /* 12px */
    line-height: 1.5 !important;
    margin-top: 0.5rem !important;
  }

  /* 第二せり上がりの調整 */
  .parallax-content-2 .parallax-title img {
    max-width: 100px !important;
  }

  /* フィーチャーカードの高さ調整 */
  .feature-card-mobile {
    height: 280px !important;
  }

  /* 第二せり上がりのタイトル文章調整 */
  .parallax-content-2 h2 {
    font-size: 0.875rem !important;
    /* 14px */
    margin-bottom: 0.5rem !important;
  }
}

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

  .parallax-content,
  .parallax-content-2,
  .feature-card,
  .feature-card-mobile {
    transition: none !important;
    animation: none !important;
  }
}

/* レスポンシブ対応 */
@media (max-width: 767px) {
  .parallax-content-section {
    padding: 0 1rem;
  }

  .parallax-content,
  .parallax-content-2 {
    text-align: center;
  }
}





/* サイズ2（769px〜1024px）でのフィーチャーカードテキストサイズ最終強制適用 */
@media (min-width: 769px) and (max-width: 1024px) {

  /* data-size="2"属性を使用してサイズ2のテキストサイズを確実に14pxに設定 */
  p[data-size="2"] {
    font-size: 0.875rem !important;
    /* 14px */
    line-height: 1.4 !important;
    /* 詰め気味の行間 */
  }

  /* 最高詳細度でサイズ2のテキストサイズを確実に14pxに設定 */
  html body section .parallax-content-section-2 .container .parallax-content-2 .grid .feature-card .bg-white\/60 p,
  html body section .parallax-content-section-2 .parallax-content-2 .grid .feature-card .bg-white\/60 p,
  html body .parallax-content-section-2 .parallax-content-2 .grid .feature-card .bg-white\/60 p,
  .parallax-content-section-2 .parallax-content-2 .grid .feature-card .bg-white\/60 p {
    font-size: 0.875rem !important;
    /* 14px */
    line-height: 1.4 !important;
    /* 詰め気味の行間 */
  }
}



/* 外部ファイル化完了 - インラインCSSを統合してパフォーマンス向上 */

/* エントリーセクションの正方形枠調整 */
.section-4 .grid>div {
  aspect-ratio: 1/1 !important;
  min-height: 280px !important;
  max-height: 320px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

/* エントリーセクションの上下余白調整 */
.section-4 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

@media (min-width: 768px) {
  .section-4 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
}

@media (min-width: 1024px) {
  .section-4 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
}

/* エントリーセクション内のコンテンツ配置調整 */
.section-4 .grid>div .flex-1 {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  flex: 1 !important;
  margin-bottom: 1rem !important;
}

.section-4 .grid>div .flex-1 h3 {
  margin-bottom: 0 !important;
  text-align: center !important;
  margin-top: 24px !important;
}

.section-4 .grid>div .flex.justify-center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ボタンテキストの中央配置調整 */
.section-4 .grid>div .cta-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.section-4 .grid>div .recruit-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* page-interview.phpのエントリーセクション用スタイル */
.page-interview .section-4 .text-center.mb-16 {
  margin-bottom: 2rem !important;
}

.page-interview .section-4 .grid>div {
  aspect-ratio: 1/1 !important;
  min-height: 260px !important;
  max-height: 300px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

/* page-interview.php用のコンテンツ配置調整 */
.page-interview .section-4 .grid>div .flex-1 {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  flex: 1 !important;
  margin-bottom: 1rem !important;
}

.page-interview .section-4 .grid>div .flex-1 h3 {
  margin-bottom: 0 !important;
  text-align: center !important;
  margin-top: 24px !important;
}

.page-interview .section-4 .grid>div .flex.justify-center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* page-interview.php用のボタンテキスト中央配置調整 */
.page-interview .section-4 .grid>div .cta-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.page-interview .section-4 .grid>div .recruit-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 外部リンクアイコンの位置調整 */
.page-interview .section-4 .grid>div.relative .absolute.bottom-4.right-4 {
  bottom: 0.5rem !important;
  right: 0.5rem !important;
}




.parallax-content-large-screen {
  pointer-events: none;
}