/* Creativeページ固有のスタイル */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

.bg-mid {
  width: 100%;
  height: 100%;
}

/* プロモーションビデオグリッド */
.promotion-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列のグリッド */
  gap: 0.5vw; /* アイテム間の間隔 */
  margin: 0px auto;
  width: 90%;
  padding: 2vw 0;
}

/* プロモーションアイテム */
.promotion-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2.34375vw;
  background-color: rgba(255, 255, 255, 0.05); /* 薄い白の背景 */
  border-radius: 1vw;
  transition: all 0.3s ease;
}

.promotion-item:hover {
  transform: translateY(-0.390625vw);
  box-shadow: 0 0.390625vw 1.171875vw rgba(0, 0, 0, 0.2);
}

/* プロモーション画像 */
.promotion-image {
  height: 17vw;
  width:  17vw;
  border-radius: 3vw;
  overflow: hidden;
  margin-bottom: 0.78125vw;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.promotion-image img {
  height: 100%;
  display: block;
}

/* プロモーションタイトル */
.promotion-title {
  color: #ffffff;
  font-size: 1.2vw;
  font-weight: 700;
  margin: 0.78125vw 0 0.390625vw;
  text-align: center;
}

/* プロモーション説明 */
.promotion-description {
  color: #ffffff;
  font-size: 0.9vw;
  text-align: center;
  line-height: 1.4;
  margin: 0 0 0.78125vw;
}

/* レスポンシブ対応 */


@media screen and (max-width: 768px) {
  .promotion-image {
    width: 40vw; /* 幅を40vwに変更 */
    height: 40vw; /* 幅を100%に設定 */
    margin-bottom: 2vw; /* 下の余白を2vwに変更 */
  }

  .promotion-grid {
    grid-template-columns: repeat(2, 1fr); /* 小さいタブレットでは2列に */
  }
  
  .promotion-title {
    font-size: 3vw;
  }
  
  .promotion-description {
    font-size: 2vw;
  }
}