@charset "utf-8";
/* CSS Document */

/* TOPビジュアル専用スタイル */

/* TOPビジュアル - 写真のみ表示、高さを大きく */
.retro-visual {
  width: 100%;
  height: 80vh;
  min-height: 600px;
  position: relative;
  overflow: hidden;
  margin-top: 60px;
}

.visual-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.retro-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.retro-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* オーバーレイと文字を削除 */
.retro-overlay {
  display: none;
}

.retro-tour-header {
  display: none;
}

/* H1タイトル - 写真の下に独立表示、上下線削除 */
.retro-title {
  margin: 40px 0 20px 0;
  text-align: center;
  color: var(--retro-primary) !important;
  background: var(--retro-bg-light);
  padding: 30px 20px;
  border-radius: 12px;
  position: relative;
}

.title-main {
  display: block;
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
  color: var(--retro-primary) !important;
}

.title-sub {
  display: block;
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--retro-secondary) !important;
}

.title-official {
  display: block;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--retro-primary) !important;
  opacity: 0.8;
}

/* レスポンシブ対応 - 縦向き画像に切り替え、高さ自動調整 */
@media (max-width: 768px) {
  .retro-visual {
    height: auto;
    min-height: auto;
    margin-top: 50px;
  }
  
  /* 縦向き画像に切り替え - 高さ全表示 */
  .retro-frame img {
    content: url("../img/top_tate.webp");
    object-fit: contain;
    object-position: center top;
    width: 100%;
    height: auto;
  }
  
  .retro-frame {
    position: relative;
    width: 100%;
    height: auto;
  }
  
  .visual-container {
    height: auto;
  }
  
  .retro-title {
    margin: 30px 0 15px 0;
    padding: 25px 15px;
  }
  
  .title-main {
    font-size: 2.2rem;
  }
  
  .title-sub {
    font-size: 1.8rem;
  }
  
  .title-official {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .retro-visual {
    height: auto;
    min-height: auto;
    margin-top: 40px;
  }
  
  /* 縦向き画像維持 - 高さ全表示 */
  .retro-frame img {
    content: url("../img/top_tate.webp");
    object-fit: contain;
    object-position: center top;
    width: 100%;
    height: auto;
  }
  
  .retro-frame {
    position: relative;
    width: 100%;
    height: auto;
  }
  
  .visual-container {
    height: auto;
  }
  
  .retro-title {
    margin: 20px 0 10px 0;
    padding: 20px 10px;
  }
  
  .title-main {
    font-size: 1.8rem;
  }
  
  .title-sub {
    font-size: 1.6rem;
  }
  
  .title-official {
    font-size: 1rem;
  }
}