@charset "utf-8";
    /* 全体リセット */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body, html {
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-family: "Helvetica Neue", Arial, sans-serif;
    }

    /* スライドショーのコンテナ */
    .slideshow-container {
      position: relative;
      width: 100%;
      height: 100vh;
    }

    /* 背景スライドの共通設定 */
    .slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      opacity: 0;
      animation: slideAnimation 12s infinite; /* 4秒×3枚 = 12秒 */
    }

    /* 各スライドの背景画像とアニメーションの遅延設定 */
    /* ※ 画像URLは任意の物に変更してください */
    .slide:nth-child(1) {
      background-image: url('https://www.wakoucai.or.jp/recruit/wp/wp-content/uploads/2026/08/202505221053.jpg');
      animation-delay: 0s;
    }
    .slide:nth-child(2) {
      background-image: url('https://www.wakoucai.or.jp/recruit/wp/wp-content/uploads/2026/08/hero1.jpg');
      animation-delay: 4s;
    }
    .slide:nth-child(3) {
      background-image: url('https://www.wakoucai.or.jp/recruit/wp/wp-content/uploads/2026/08/29307022_m.jpg');
      animation-delay: 8s;
    }

    /* アニメーション（フェードイン・アウト） */
    @keyframes slideAnimation {
      0% { opacity: 0; transform: scale(1); }
      8% { opacity: 1; } /* 滑らかに表示 */
      33% { opacity: 1; } /* 表示を維持 */
      41% { opacity: 0; transform: scale(1.05); } /* 滑らかに消えつつ少しズーム */
      100% { opacity: 0; }
    }

    /* 背景を少し暗くするオーバーレイ（テキストを読みやすくするため） */
    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.3); /* 黒の30%透過 */
      z-index: 1;
    }

    /* テキストエリア（中央配置） */
    .content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      text-align: center;
      color: #ffffff;
      width: 90%; /* スマホ画面崩れ防止 */
      max-width: 800px;
    } 
    .content a{
      color: rgba(255,255,255,0.7);
	  text-decoration: none;
    }

    /* レスポンシブテキスト（vw単位で画面幅に連動） */
    .content h1 {
      font-size: calc(5rem + 2vw);
      font-weight: 700;
      line-height: 1.3;
      margin-bottom: 20px;
      text-shadow: 0 2px 10px rgba(0,0,0,0.5);
	  font-family: cursive;
    }

    .content p {
      font-size: calc(1rem + 0.5vw);
      line-height: 1.6;
      text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    }


    @font-face {
  src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
  font-family: "AmstelvarAlpha";
  font-style: normal;
}

  .content h1 {
  font:
    5rem "AmstelvarAlpha",
    sans-serif;
  /* font-variation-settings: "slnt" 12; */
  font-style: oblique 23deg;
}
.bnto-text-focus {
  font-weight: 900;
  animation: bnto-focus 2.4s ease-in-out infinite;
}


.bnto-text-focus {
  color: rgba(255,255,255,0.8);
  font-weight: 900;
  animation: bnto-focus 2.4s ease-in-out infinite;
  animation-iteration-count: 3;
}
@keyframes bnto-focus {
  0%, 100% { filter: white(0); opacity: 1; }
  45%      { filter: white(7px); opacity: .35; }
}