@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow-y: auto; 
  display: flex;
  flex-direction: column;
  align-items: left;

  min-height: 100vh;
  gap: 20px;
}

/* --- メインビジュアル --- */
.hero-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 1960 / 600;
  min-height: 400px;
  max-height: 100vh;
  overflow: hidden;
  background-color: #fff;
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  will-change: transform, opacity;
  animation: kenBurns 15s infinite ease-in-out;
}

.slide-1 { background-image: url('../img/1.jpg'); animation-delay: 0s; }
.slide-2 { background-image: url('../img/2.jpg'); animation-delay: 5s; }
.slide-3 { background-image: url('../img/3.jpg'); animation-delay: 10s; }
@keyframes kenBurns {
  0% { opacity: 0; transform: scale(1.15) translateX(-3%); }
  8% { opacity: 1; }
  33% { opacity: 1; }
  41% { opacity: 0; transform: scale(1.15) translateX(3%); }
  100% { opacity: 0; }
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.hero-content {
  position: absolute;
  top: 30%;
  left: 10%;
transform: translateY(-50%); /* X方向の -50% 移動を削除し、Y軸（上下中央）のみに */
  z-index: 2;
  color: #ffffff;
  text-align: left;
  width: 90%;
  max-width: 800px;
  /*font-family: "Zen Kaku Gothic New", sans-serif;*/
  animation: floatUp 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes floatUp {
  0% { opacity: 0; transform: translateY(calc(-50% + 15px)) scale(0.92); }
  100% { opacity: 1; transform: translateY(-50%) scale(1); }
}

.hero-content h1 {
  font-size: 4.2rem;
  font-weight: bold;
  margin-bottom: 0.8rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
/*font-family: 'Montserrat', sans-serif;*/
}

.hero-content p {
  font-size: 2.4rem;
  line-height: 1.6;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* --- スクロールアニメーションエリア --- */
.animation-container {
  position: relative;
  width: 100%;          /* 幅を明確に指定 */
  max-width: 100%;    /* 必要に応じて最大幅を指定 */
  overflow: hidden;     /* はみ出た画像を隠す */
  margin: 0 auto;
}

/* 初期状態：画面右外へ隠す */
.animated-image {
  display: block;
  width: 100%;
  height: 400px;
object-fit: cover;
  transform: translateX(100%);
  opacity: 0;
  transition: transform 1.2s ease-out, opacity 1.2s ease-out;
}

.animated-text {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-40%);
  /*font-family: "Zen Kaku Gothic New", sans-serif;*/
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: transform 1s ease-out 0.6s, opacity 1s ease-out 0.6s;
}

.jp-text {
  font-size: 3em;
  font-weight: bold;
  margin-bottom: 0.2em;
  letter-spacing: 0.1em;
 font-family: "Yu Mincho", "Hiragino Mincho ProN", "serif";
}

/* スクロールして画面内に入った時（is-active付与時） */
.animation-container.is-active .animated-image {
  transform: translateX(0);
  opacity: 1;
}

.animation-container.is-active .animated-text {
  transform: translateY(-50%);
  opacity: 1;
}

@media (max-width: 768px) {
  .hero-content h1 { font-size: 1.5rem; }
  .hero-content p { font-size: 1.3rem; }
}

/* --- 採用情報バナー（横幅80%） --- */
.banner-container {
  width: 80% !important;     /* 全体の横幅を80%に指定 */
  max-width: 1000px;         /* 大きくなりすぎないよう上限を指定（お好みで調整可） */
  margin: 0 auto;            /* 中央寄せ */
  border-radius: 12px;       /* 角を丸くしてバナー感を出す場合（不要なら削除） */
}

/* 画像の高さをバナー用に調整 */
.banner-container .animated-image {
  height: 300px;             /* バナーらしい横長サイズにする高さ設定 */
  object-fit: cover;
}

/* スマホ表示時の調整 */
@media (max-width: 768px) {
  .banner-container {
    width: 90% !important;   /* スマホでは少し広げて見やすく */
  }
  .banner-container .animated-image {
    height: 200px;
  }
}
/* --- レスポンシブ対応（画面幅 768px 以下 / スマホ・タブレット） --- */
@media (max-width: 768px) {

  /* 1. メインビジュアルのテキスト位置とサイズ調整 */
  .hero-content {
    width: 85%;
    left: 7.5%;
    top: 40%;
  }

  .hero-content h1 {
    font-size: 1.8rem !important; /* スマホ用にタイトルを小さく調整 */
    line-height: 1.3;
  }

  .hero-content p {
    font-size: 1.3rem;
  }

  /* 2. スクロールアニメーションエリア（事業紹介・採用情報） */
  .animation-container {
    width: 90% !important; /* スマホでは左右余白を少し縮めて見やすく */
  }

  .animated-image {
    height: 320px; /* 画像の高さをスマホ用に確保 */
  }

  .animated-text {
    left: 5%;
    width: 90%;
    font-size: 1.3rem; /* 本文サイズ調整 */
  }

  .jp-text {
    font-size: 1.8em; /* 英語タイトル（BUSINESS / RECRUIT）のサイズ調整 */
    margin-bottom: 0.1em;
  }

  /* 3. 採用情報バナーの設定 */
  .banner-container {
    width: 92% !important; /* スマホでは92%幅にして画面いっぱいに表現 */
  }

  .banner-container .animated-image {
    height: 280px;
  }
}

/* 画面幅 480px 以下（小型スマホ用）の微調整 */
@media (max-width: 480px) {
  .hero-content h1 {
    font-size: 1.4rem !important;
  }
  
  .jp-text {
    font-size: 1.5em;
  }
}