/* メインビジュアルの親（ここがすべての基準） */
.main-visual {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
  line-height: 0;
}

/* 30枚を乗せるレイヤー：背景写真にぴったり重ねる */
.floating-wall {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

/* タイル1枚ごとの設定：サイズを強制固定 */
.float-tile {
  position: absolute !important;
  width: 16.6666% !important; /* 6列 */
  height: 20% !important;    /* 5段 */
  object-fit: cover !important;
  object-position: center !important;
  opacity: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  max-width: none !important;
  
  /* 12秒サイクル。linearにすることでズレを防ぐ */
  animation: tileStepAppear 15s infinite linear;
}

/* アニメーションの仕組み：
  JSのdelay（0〜3.48秒）があるため、9秒時点で一斉に消すには
  点灯時間を短くし、消える瞬間（75%）を鋭く設定します。
*/
@keyframes tileStepAppear {
  0%   { opacity: 0; }
  1%   { opacity: 1; }  /* 順番に出現 */
  45%  { opacity: 1; }  /* 全員揃った状態を維持 */
  45%  { opacity: 1; }  /* 9秒経過：ここで一斉消去の準備 */
  65.1% { opacity: 0; }  /* 瞬時に消える（delayがあってもここで全員消える） */
  100% { opacity: 0; }  /* 残り3秒は透明のまま */
}

/* キャプション：左下に配置 */
.main-visual .caption {
  position: absolute !important;
  z-index: 10 !important;
  top: auto !important;
  right: auto !important;
  bottom: 40px !important; /* 位置調整はここ */
  left: 40px !important;   /* 位置調整はここ */
  transform: none !important;
  width: auto !important;
  text-align: left !important;
  color: #fff !important;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.8) !important;
  pointer-events: auto !important;
}

@media screen and (max-width: 768px) {
  .main-visual .caption {
    bottom: 20px !important;
    left: 20px !important;
  }
}



/* --- イニシャル選択エリアの決定版 --- */
.selection-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr); 
  gap: 10px;
  /* 上下に30px、左右は auto にすることで中央寄せ */
  margin: 30px auto !important; 
  max-width: 750px; 
  /* 念のため、親要素の中で浮かないように設定 */
  width: 100%;
}

/* ボタン本体：最初から 2px 分の場所を確保しておく */
.initial-box {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; 
  /* 境界線を 1px から 2px にし、色は薄くしておく（または透明にする） */
  border: 2px solid #eee !important; 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  /* transform の変化を滑らかに（ズレ防止） */
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  overflow: hidden;
  box-sizing: border-box; /* 線の太さを内側に含める設定 */
}

/* ホバー・アクティブ時：線の「色」だけを変えるので、サイズは変わりません */
.initial-box:hover,
.initial-box.active {
  border-color: var(--taya-gold) !important;
  box-shadow: 0 0 10px rgba(167, 148, 95, 0.4);
  /* scale を使う場合は微小(1.02)に留めるか、不要なら削除してください */
  transform: scale(1.02); 
  z-index: 3; /* 重なり順を上にして影を綺麗に見せる */
}

/* 斜めNEWリボン（細身・シャープ版） */
.initial-box.new-ribbon::before {
  content: "NEW";
  position: absolute;
  top: 3px; 
  left: -22px; 
  width: 65px; 
  height: 14px; 
  background-color: #c00;
  color: #fff;
  font-size: 8px; 
  font-weight: bold;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-45deg);
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  line-height: 1;
  letter-spacing: 0.05em;
}

/* スマホ対応：6列 */
@media screen and (max-width: 768px) {
  .selection-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    /* スマホでも中央寄せを維持しつつ、左右に少しマージン */
    margin: 20px auto !important;
    width: calc(100% - 20px); 
  }
}