@charset "UTF-8";
/** @format */
/* =========================
   TOP PAGE (top.scss)
   - Hero carousel (slick)
   - Hero buttons (sync via JS)
   - HeroQuick buttons (not synced)
   ========================= */
.hero {
  /* hero全体（外側） */
  margin-bottom: 14px;
}

/* heroの枠（角丸/枠線/はみ出し防止） */
.hero__frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #222;
  background: #111; /* 余白が出た時の下地 */
}

/* slick 本体：枠の比率をここで決める（←見た目が安定する） */
.hero__slider {
  width: 100%;
  aspect-ratio: 16/9; /* PC：好みで変更OK（例：3/2 とか） */
}

/* slick内部を“全部100%の高さ”に揃える */
.hero__frame .slick-list,
.hero__frame .slick-track,
.hero__frame .slick-slide,
.hero__frame .slick-slide > div {
  height: 100%;
}

/* 1枚分の要素（高さ100%を受け取れるように） */
.hero__slide {
  height: 100%;
}

/* picture/img を枠いっぱいに */
.hero__slide picture,
.hero__slide img {
  width: 100%;
  height: 100%;
  display: block;
}

/* ここが弟の希望：黒帯を出さない（＝切り抜いてでも埋める） */
.hero__slide img {
  object-fit: cover;
  object-position: center;
}

/* スライドに連動するボタン（hero内に重ねる） */
.hero__actions {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: transparent;
  height: auto;
  padding: 0;
  margin: 0;
  pointer-events: auto;
}

.hero__btn {
  display: grid;
  place-items: center;
  height: 44px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  line-height: 1;
  user-select: none;
}

.hero__btn--primary {
  background: #8b3a3a;
  color: #fff;
}

.hero__btn--ghost {
  background: #fff;
  color: #111;
  border-color: #fff;
}

/* dots を使う場合：ボタンと被らないように上へ逃がす */
.hero__frame .slick-dots {
  z-index: 6;
  bottom: 70px; /* 44px(ボタン) + 12px(余白) + α。被るなら増やす */
}

/* dotsのクリックがしやすいように少し余白 */
.hero__frame .slick-dots li button:before {
  font-size: 10px;
}

/* hero下の “連動しない” ボタン置き場 */
.heroQuick {
  margin-top: 12px;
}

.heroQuick__list {
  display: flex;
  gap: 12px;
}

.heroQuick__btn {
  flex: 1;
  display: grid;
  place-items: center;
  height: 48px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  background: #433333; /* 仮：デザインに合わせて */
  color: #fff;
}

/* 1個だけのとき：1列にして中央（＝横幅100%のボタン1個） */
.js-heroSlider.is-one-action ~ .hero__actions {
  grid-template-columns: 1fr;
}

/* 0個のとき：非表示 */
.js-heroSlider.is-no-action ~ .hero__actions {
  display: none;
}

@media (max-width: 640px) {
  .heroQuick__btn {
    padding: 12px 0;
  }
}
/* =========================
   SP
   ========================= */
@media (max-width: 640px) {
  /* SP用画像が縦長なら、ここを縦寄りにするとキレイ */
  .hero__slider {
    aspect-ratio: 4/5; /* 例：縦長。PCと同じでいいなら 16/9 のままでOK */
  }
  /* hero内2ボタン：縦 */
  .hero__actions {
    grid-template-columns: 1fr;
  }
  .hero__btn {
    height: 48px;
  }
  /* dots位置も少し調整（ボタンが縦で高さ増えるため） */
  .hero__frame .slick-dots {
    bottom: 112px; /* 48px×2 + 12px + α。被るなら増やす */
  }
  /* hero下ボタン：縦 */
  .heroQuick__list {
    flex-direction: column;
  }
}
/* =========================
   上映中の作品（カルーセル）
   ========================= */
.filmsSlider {
  display: flex;
  gap: 12px;
  /* slick入ってない時の保険 */
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}

.filmThumbLink {
  display: block;
  text-decoration: none;
  color: inherit;
  min-width: 160px; /* slick無し時 */
}

.filmThumbLink:hover {
  opacity: 0.92;
}

.filmThumbLink.is-disabled {
  pointer-events: none;
  opacity: 0.6;
}

.filmThumb {
  display: grid;
  gap: 8px;
}

.filmThumb__media {
  border-radius: 12px;
  border: 1px solid #d6d0c8;
  background: #f2f0ed;
  overflow: hidden;
  aspect-ratio: 2/3; /* ポスターっぽく */
}

.filmThumb__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.filmThumb__ph {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 10px;
  font-weight: 800;
  text-align: center;
}

.filmThumb__title {
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.2;
}

/* slickの左右余白が欲しい時 */
.filmsSlider .slick-slide {
  padding: 0 6px;
}

.filmsSlider .slick-list {
  margin: 0 -6px;
}

/* =========================
   バナー
   ========================= */
.bannerLink {
  display: block;
  margin: 0 auto 12px;
}

.bannerLink img {
  width: 100%;
  height: auto;
  display: block;
}

/* pcOnly / spOnly が無い場合の保険 */
.pcOnly {
  display: block;
}

.spOnly {
  display: none;
}

@media (max-width: 1000px) {
  .pcOnly {
    display: none;
  }
  .spOnly {
    display: block;
  }
}
@media (min-width: 768px) and (max-width: 959px) {
  .bannerLink {
    width: 50vw;
  }
}/*# sourceMappingURL=top.css.map */