/* =============================================================================
   Top Location（ロケーションセクション）
   Figma: node-id=234:6273
   ============================================================================= */

/* セクション全体 */
.top-location {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--margin-48);
  padding-top: var(--margin-80);
  width: 100%;
}

/* =============================================================================
   画像ギャラリー（無限横スクロール Marquee）
   セット1枚分の幅: 300+180+240+180+300+180+240+180 = 1800px
                  + gap 7×40px + trailing padding 40px = 2120px
   track = セット × 2 = 4240px → translateX(-50%) = -2120px でシームレスループ
   ============================================================================= */

@keyframes location-gallery-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.top-location__gallery {
  overflow: hidden;
  width: 100%;
}

/* トラック: セット2つを横並びにしてアニメーション */
.top-location__gallery-track {
  display: flex;
  animation: location-gallery-scroll 30s linear infinite;
}

/* セット: gap + trailing padding-right でシームレスな繰り返しを実現 */
.top-location__gallery-set {
  display: flex;
  align-items: center;
  gap: var(--margin-40);
  padding-right: var(--margin-40);
  list-style: none;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  flex-shrink: 0;
}

/* アイテム共通: position: relative で内部の img を絶対配置してトリミング */
.top-location__gallery-item {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  background-color: var(--color-table-border); /* 画像未配置時のプレースホルダー */
}

/* 絶対配置で inset: 0 → base.css の height: auto に依存せず確実に正方形に収まる */
.top-location__gallery-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}

/* サイズバリアント（正方形） */
.top-location__gallery-item--lg {
  width: 300px;
  height: 300px;
}

.top-location__gallery-item--md {
  width: 240px;
  height: 240px;
}

.top-location__gallery-item--sm {
  width: 180px;
  height: 180px;
}

/* =============================================================================
   テキストエリア（見出し＋本文）
   ============================================================================= */

/* Figma PC 幅 868px を踏襲 */
.top-location__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--margin-24);
  width: 100%;
  max-width: 868px;
  padding: 0 var(--margin-32);
}

/* paragraph のテキスト揃えを中央に */
.top-location__paragraph {
  text-align: center;
}

/* =============================================================================
   レスポンシブ（375px）
   ============================================================================= */

@container (max-width: 640px) {
   .top-location {
    padding-top: var(--margin-24);
  }
  
  .top-location__text {
    padding: 0 var(--margin-16);
  }
}