@charset "utf-8";

/*==============================
  ベーススタイル
==============================*/

header {
   background: transparent; /* 背景を透明に */
}

.main-visual-area {
    max-width: 1800px;
    margin: 0 auto;
}
/* ===============================
   背景スライダー全体設定
=============================== */
.main-visual {
  position: relative;
  height: calc(var(--vh, 1vh) * 100); /* JSで設定 */
  overflow-y: auto;
}

.main-visual-slider {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0; /* 一番下に配置 */
}

.main-visual-slider > div {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* 各スライドの背景画像指定 */
.top_main01 {
  background-image: url("../images/top_main.jpg");
  background-size: cover;
  background-position: center;
  height: 100%;
}

.top_main02 {
  background-image: url("../images/top_main02.jpg");
  background-size: cover;
  background-position: center;
  height: 100%;
}

.top_main03 {
  background-image: url("../images/top_main03.jpg");
  background-size: cover;
  background-position: center;
  height: 100%;
}

/* ===============================
   スライダー上の要素（ロゴ・カード）
=============================== */
.logo,
.overlay-cards {
  position: relative;
  z-index: 10;
}

.logo {
  text-align: center;
  padding-top: 15%;
  max-width: 650px;
  margin: 0 auto;
}

.overlay-cards {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin-top: 50px;
}

.card,
.card_movie {
  transition: transform 0.3s ease;
  cursor: pointer;
}

.card {
  max-width: 450px;
  flex: 1 1 450px;
}

.card_movie {
  max-width: 550px;
  flex: 1 1 550px;
}

.card img,
.card_movie img {
  width: 100%;
  display: block;
}

.card:hover,
.card_movie:hover {
  transform: translateY(-10px);
}

/* ===============================
   タブレット以下（〜1200px）
   → 2列固定のグリッドに切り替え
=============================== */
@media screen and (max-width: 1024px) {
  .overlay-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列固定 */
    justify-items: center;
    margin: 50px auto;
	max-width: 1000px;
    grid-auto-rows: auto; /* 高さは画像の縦横比に合わせる */
	padding: 0 20px;
	gap: 10px;
  }

  .card,
  .card_movie {
    max-width: none;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  /* 上段は均等に並べる */
  .overlay-cards .card:nth-child(1),
  .overlay-cards .card:nth-child(2) {
    grid-column: auto; /* 1:1 の比率は幅で調整 */
  }


  /* 画像そのまま比率を維持 */
  .overlay-cards img {
    width: 100%;
    height: auto; /* 高さは自動で比率維持 */
    display: block;
  }
}

@media screen and (max-width: 480px) {
  .overlay-cards {
    grid-template-columns: 1fr; /* 1列にする */
    gap: 20px; /* カード間の余白 */
	padding: 0 15px;
  }

  /* 下段カードも自動で1列に並ぶ */
  .overlay-cards .card,
  .overlay-cards .card_movie {
    width: 100%; /* 幅いっぱい */
    grid-column: auto; /* 列指定解除 */
  }
}
/* ===============================
   Slickスライダー用の補正
=============================== */
.slick-slide {
  height: calc(var(--vh, 1vh) * 100) !important;
  display: block !important; /* Slickによる display: none 対策 */
}

.main-visual-slider .slick-track {
  height: 100% !important;
}

.main-visual-slider .slick-list {
  height: 100% !important;
  overflow: visible !important;
}

/* ===============================
   オープニングムービー
=============================== */
.opening-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: black;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 1;
  transition: opacity 1s ease;
}

.opening-video.hide {
  opacity: 0;
  pointer-events: none;
}

.opening-video video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}
@media screen and (max-width: 600px){
	.opening-video video {
		object-fit: contain;
	}
}
/* ===============================
   サイト本体の表示制御
=============================== */
.site-content {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 1s ease;
}

.site-content.show {
  opacity: 1;
  visibility: visible;
}


@media (max-height: 800px) {
	.logo {
    padding-top: 15%;
}
	.logo {
    max-width: 500px;
}
}