.backColor {
  background-color: #f5f5f5; /* または他のカラーや背景画像でもOK */
  min-height: 100vh;         /* 画面の高さにフィットさせる */
  width: 100%;
  overflow: hidden;
}

.works-hero{
  padding: 130px 0 70px;
}
.works-title{
margin: 0;
font-size: 48px;
color: #6d6c6c;
}
.works-subtitle{
  margin: 0;
  font-size: 15px;
}


/* ワークス　流れる文字 */
/* 横スクロール共通 */
.scroll-horizontal {
    position: absolute;
    color: #ffffff;
    font-size: 5vw;
    font-weight: bold;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
    user-select: none;
  }
  .scroll-top-horizontal {
    top: 0;
    left: 100vw;
    animation: scroll-left 30s linear infinite;
  }
  .scroll-bottom-horizontal {
    bottom: 0;
    left: -100vw;
    animation: scroll-right 30s linear infinite;
  }
  @keyframes scroll-left {
    0% {
      left: 100vw;
    }
  
    100% {
      left: -100vw;
    }
  }
  @keyframes scroll-right {
    0% {
      left: -100vw;
    }
  
    100% {
      left: 100vw;
    }
  }
  
  
  
/* ===============================
   共通設定：ワークスセクション
================================ */

/* 左右スクロールテキスト共通 */
/* .scroll-side {
  position: absolute;
  writing-mode: vertical-rl;
  color: #ffffff;
  font-size: 3vw;
  font-weight: bold;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 10;
}

.scroll-left {
  left: 20px;
  top: -100vh;
  animation: scroll-down 30s linear infinite;
}

.scroll-right {
  right: 20px;
  top: 100vh;
  animation: scroll-up 30s linear infinite;
}

@keyframes scroll-down {
  0% { top: -100vh; }
  100% { top: 100vh; }
}

@keyframes scroll-up {
  0% { top: 100vh; }
  100% { top: -100vh; }
} */


/* ===============================
   作品一覧：グリッドレイアウト設定
================================ */

.works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PC：3列 */
    gap: 40px;
    justify-content: center;
    margin: 0 auto;
    max-width: 1200px;
  }
  
  @media (max-width: 768px) {
    .works-grid {
      grid-template-columns: repeat(2, 1fr); /* タブレット：2列 */
    }
  }
  
  @media (max-width: 480px) {
    .works-grid {
      grid-template-columns: 1fr; /* スマホ：1列 */
    }
  }
  
  /* ===============================
     各作品ボックス設定
  ================================ */
  
  .work-box {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0;
    display: inline-block;
  }
  
  /* ===============================
     画像表示エリア
  ================================ */
  
  .image-wrapper {
    width: 90%;
    aspect-ratio: 5 / 4; /* アスペクト比で高さを固定 */
    box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.3);
    margin: 5px 10px;
    overflow: hidden; /* はみ出し防止（オプション） */
  }
  
  .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* はみ出さず切り取り表示 */
    display: block;
  }
  
  /* ===============================
     制作内容（キャプション）テキスト
  ================================ */
  
  .date-label {
    display: block;
    margin-top: 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: #7f8081;
  }
  
  @media (max-width: 480px) {
    .date-label {
      font-size: 0.75rem;
      padding: 4px 8px;
    }
  }

  
  /* ===============================
   View More ボタン
================================ */
.viewButton {
  margin-top: 3rem;
  /* margin-bottom: 1rem; */
  background-color: #b7b7b7;
  color: #6d6c6c;
  border-radius: 999px;                 /* 完全なpill型に */
  padding: 10px 22px;                   /* 上下左右に余白 */
  width: fit-content;                  /* テキストに合わせる */
  margin-left: auto;
  margin-right: 5%;
  text-align: center;
  box-sizing: border-box;
  transition: background-color 0.3s ease;
}

.viewButton:hover {
  background-color: #ddd;
}

.viewButton a {
  color: #6d6c6c;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  width: 100%;
}

/* スマホ表示 */
@media screen and (max-width: 768px) {
  .viewButton {
    margin: 2rem auto 1rem;
    padding: 10px 20px;
  }
}




.fade-in {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1.2s ease-out forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}