/* ===== Hero ===== */
/* ===== Hero 基本 ===== */
.hero{
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background-color: #000; /* 動画/画像ロード前の保険 */
}

.hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-inner{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: clamp(26px, 5vh, 56px);
  z-index: 2;

  /* テキストが広がりすぎないように */
  max-width: 920px;
}

.hero-overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(900px 520px at 20% 40%, rgba(0,0,0,.06), rgba(0, 0, 0, 0)),
    linear-gradient(to top, rgba(7, 8, 11, 0), rgba(7,8,11,.15));
}

.hero-kicker{opacity:.78;letter-spacing:.12em;text-transform:uppercase;margin:0}
.hero-title{font-size:48px;line-height:1.08;margin:10px 0 10px}
.hero-sub{opacity:.82;line-height:1.6;margin:0 0 18px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}

.scroll-hint{
  position:absolute;right:18px;bottom:18px;
  opacity:.62;font-size:12px;letter-spacing:.2em;
  padding:10px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}

/* ===== Deck ===== */
/* デック全体：スクロール量を確保（カード1枚につき100vhぶん） */
.deck{
  position:relative;
  height: calc(var(--slides) * 100vh);
  border-top:1px solid var(--line);
}

/* 舞台：ここが固定表示（sticky）され続ける */
.deck-stage{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* 左上の切替ボックス（固定UI） */
.biz-titlebox{
  position: fixed;
  top: 82px;
  left: 18px;
  pointer-events:none;
  z-index: 50;
  transition: opacity .18s ease, transform .18s ease;
}
.biz-titlebox.is-hidden{
  opacity:0;
  transform: translateY(-6px);
}
.biz-titlebox-inner{
  width:min(360px, 92vw);
  padding:14px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--glass);
  backdrop-filter: blur(10px);
}
.biz-title-img{width:100%;height:auto;display:block;opacity:.95}
.biz-title-copy{margin:10px 0 0;opacity:.78;line-height:1.5}

/* 1枚のカード（全面背景） */
.deck-card{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding:120px 18px 80px;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* JSで translateY を動かす */
  transform: translateY(0);
  will-change: transform;

  /* パネル境界の“紙感” */
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

/* 暗転レイヤー */
.deck-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, rgba(7,8,11,.26), rgba(7,8,11,.84));
  z-index:0;
}

/* テキスト+ボタンだけ */
.biz-card{
  position:relative;
  z-index:1;

  width:min(720px, 100%);
  margin-left:auto;

  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 20px;
  background:rgba(255,255,255,.04);
  backdrop-filter: blur(6px);
}
.biz-meta{opacity:.72;letter-spacing:.08em}
.biz-copy{opacity:.92;margin:10px 0 16px;line-height:1.7}
.biz-actions{display:flex;gap:10px;flex-wrap:wrap}

/* 背景（WebP） */
.biz-bg-vivipale{ background-image:url("../img/bg/vivipale_pc.webp"); }
.biz-bg-stst{     background-image:url("../img/bg/stst_pc.webp"); }
.biz-bg-za98run{  background-image:url("../img/bg/za98run_pc.webp"); }
.biz-bg-creative{ background-image:url("../img/bg/creative_pc.webp"); }
.biz-bg-mrfest{   background-image:url("../img/bg/mrfest_pc.webp"); }


/* ===== News（1画面＝1枚） ===== */
.news{
  min-height: 100svh;              /* 画面高ぴったり */
  padding: clamp(72px, 10vh, 120px) 0;
  border-top: 1px solid var(--line);

  display: flex;
  align-items: center;             /* 縦中央寄せ */
}

.news .container{
  width: 100%;
}

.news-list{
  margin-top: 24px;
}

.news-item{
  max-width: 720px;
  margin: 0 auto;

  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;

  background: rgba(255,255,255,.03);
  backdrop-filter: blur(4px);
}

.news-item time{
  opacity: .72;
  font-size: 12px;
  letter-spacing: .08em;
}

.news-item p{
  margin: 10px 0 0;
  opacity: .92;
  line-height: 1.7;
}


/* Footer */
.footer{border-top:1px solid var(--line);padding:26px 0;margin-top:40px}

/* ===== Responsive ===== */
@media (max-width: 860px){
  .hero-title{font-size:36px}
  .biz-titlebox{
    left:0; right:0; top:72px;
    display:flex; justify-content:center;
  }
  .deck-card{padding:104px 18px 72px}
  .biz-card{margin-left:0}
}

/* 動き嫌いな人 */
@media (prefers-reduced-motion: reduce){
  .deck-card{will-change:auto}
}

/* ===== SPは静止画に完全切替 ===== */
@media (max-width: 860px){
  /* 動画を完全に殺す */
  .hero-video{
    display: none;
  }

  /* 静止画を背景に */
  .hero{
    background-image: url("../img/hero_sp.webp");
    background-size: cover;
    background-position: center top; /* ロゴ保護 */
    background-repeat: no-repeat;
  }

  .hero-overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(900px 520px at 20% 40%, rgba(0,0,0,.06), rgba(0, 0, 0, 0.429)),
    linear-gradient(to top, rgba(7, 8, 11, 0.368), rgba(7,8,11,.15));
}
}

/* ===== SP: use portrait images ===== */
@media (max-width: 860px){
  .biz-bg-vivipale{ background-image:url("../img/bg/vivipale_sp.webp"); }
  .biz-bg-stst{     background-image:url("../img/bg/stst_sp.webp"); }
  .biz-bg-za98run{  background-image:url("../img/bg/za98run_sp.webp"); }
  .biz-bg-mrfest{   background-image:url("../img/bg/mrfest_sp.webp"); }
  .biz-bg-creative{ background-image:url("../img/bg/creative_sp.webp"); }

  /* ロゴや文字が上寄りなら top が安定 */
  .deck-card{
    background-position: center top;
  }
}