/* ===== pages/top.css =====
 * Top page only
 * body.page-home 前提（無いなら .page-home を外してOK）
 */

/* =========================
   Variables
========================= */
:root{
  --top-bg: #222;
  --top-text: rgba(255,255,255,.88);
  --top-radius: 999px;
  --top-radius-lg: 18px;
  --top-shadow: 0 10px 26px rgba(0,0,0,.28);
}

.page-home{
  background: var(--top-bg);
}

/* =========================
   Hero base (フル高さ・余白なし)
========================= */
.page-home .top-hero{
  position: relative;
  background: var(--top-bg);
  overflow: hidden;
  min-height: 100vh;
}

/* 背景の薄いビネット（全体） */
.page-home .top-hero__bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(60% 60% at 30% 40%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(70% 80% at 0% 60%, rgba(0,0,0,.55), transparent 65%),
    radial-gradient(80% 90% at 100% 40%, rgba(0,0,0,.45), transparent 65%);
}

/* inner は“画面幅いっぱい”。余白はここでは作らない */
.page-home .top-hero__inner{
  position: relative;
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;               /* ← 余白の原因になりやすいのでゼロ固定 */
  align-items: stretch; /* ← 子要素を縦に伸ばす */
}

/* 右カラム（モバイルでは intro に出すので非表示） */
.page-home .top-hero__side{
  display: none;
}

/* =========================
   KV（左ブロック）: 背景フル確実化
========================= */

/* 左ブロックそのものを“画面高さに合わせて”伸ばす */
.page-home .top-hero__kv{
  position: relative;
  overflow: hidden;
  background: #111;

  /* ← フルに見せたいので角丸/影は一旦外す（余白っぽさの原因になりやすい） */
  border-radius: 0;
  box-shadow: none;

  min-height: 100vh;  /* ← PCで確実にフル */
}

/* 背景：必ず親の全面を埋める */
.page-home .top-hero__kvBg{
  position: absolute;
  inset: 0;
  z-index: 1;

  /* ここが最重要：cover + no-repeat + center */
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.70)),
    url("../../img/hero/kv-keiben01.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  /* “小さく中央”が出る時の原因になりやすいので、まずは切る */
  transform: none;

  filter: saturate(.96) contrast(.98);
}

/* 右端を右カラム背景へ溶かす（左ブロック内で完結） */
.page-home .top-hero__kvFadeRight{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 68%,
    rgba(34,34,34,.55) 82%,
    rgba(34,34,34,.92) 100%
  );
}

/* 日付：最左上 */
.page-home .top-hero__date{
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 14px;
  color: rgba(255,255,255,.86);
  background: rgba(0,0,0,.40);
  border: 1px solid rgba(255,255,255,.10);
  text-decoration: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.page-home .top-hero__dateText{ font-size: 13px; letter-spacing: .02em; }
.page-home .top-hero__dateLink{ font-size: 13px; color: rgba(255,255,255,.72); letter-spacing: .02em; }

/* 前景カード：中央に大きく（HTML img版） */
.page-home .top-hero__kvFrontWrap{
  position: relative;
  z-index: 4;
  padding-top: 72px;
  display: flex;
  justify-content: center;
}

/* 2枚を重ねる：is-activeだけ表示 */
.page-home .top-hero__kvFront{
  position: absolute;
  width: min(820px, 75%);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 22px 58px rgba(0,0,0,.58);
  overflow: hidden;

  opacity: 0;
  transform: translateY(2px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

.page-home .top-hero__kvFront.is-active{
  position: relative;         /* activeだけ通常フローにして高さを確保 */
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 画像は確実に埋める */
.page-home .top-hero__kvFront img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* 切替中演出（任意） */
.page-home .top-hero__kvFront.is-swapping{
  opacity: .86;
  transform: translateY(2px);
}



.page-home .top-hero__kvThumb{
  width: 96px;
  height: 54px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.22);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0,0,0,.35);
}

.page-home .top-hero__kvThumb img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: .78;
  transform: scale(1.02);
}

.page-home .top-hero__kvThumb.is-active{
  border-color: rgba(255,255,255,.62);
}
.page-home .top-hero__kvThumb.is-active img{
  opacity: 1;
}

/* モバイル：縦感 */
@media (max-width: 959px){
  .page-home .top-hero__kvFront{
    width: min(520px, 92%);
    aspect-ratio: 4 / 3;
  }
}



/* =========================
   Buttons（ピル）
========================= */
.page-home .top-btn{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: var(--top-radius);
  border: 2px solid rgba(255,255,255,.55);
  color: rgba(255,255,255,.80);
  text-decoration: none;
  background: rgba(255,255,255,.03);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}
.page-home .top-btn--primary{
  width: 100%;
  min-height: 54px;
  font-size: 15px;
  border-color: rgba(255,255,255,.62);
}

/* =========================
   Updates（見出し＋1件カード）
========================= */
.page-home .top-updates{ margin-top: 10px; }
.page-home .top-updates__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 10px 0 12px;
}
.page-home .top-updates__title{
  margin: 0;
  font-size: 20px;
  letter-spacing: .02em;
  color: rgba(255,255,255,.86);
}
.page-home .top-updates__en{
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.46);
}
.page-home .top-updates__more{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: var(--top-radius);
  border: 1px solid rgba(255,255,255,.38);
  color: rgba(255,255,255,.74);
  text-decoration: none;
  background: rgba(255,255,255,.04);
}
.page-home .top-updates__card{
  position: relative;
  display: block;
  padding: 14px 50px 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(255,255,255,.06);
  text-decoration: none;
  color: rgba(255,255,255,.86);
}
.page-home .top-updates__meta{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.page-home .top-updates__date{ font-size: 12px; color: rgba(255,255,255,.58); }
.page-home .top-updates__tag{
  font-size: 12px;
  padding: 3px 10px;
  border-radius: var(--top-radius);
  border: 1px solid rgba(255,255,255,.26);
  color: rgba(255,255,255,.70);
  background: rgba(0,0,0,.16);
}
.page-home .top-updates__cardTitle{
  font-size: 14px;
  letter-spacing: .02em;
  line-height: 1.45;
}
.page-home .top-updates__go{
  position: absolute;
  top: 50%;
  right: 14px;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.36);
  background: rgba(0,0,0,.16);
}
.page-home .top-updates__go::before{
  content:"";
  position:absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid rgba(255,255,255,.78);
  border-right: 2px solid rgba(255,255,255,.78);
  transform: translate(-55%, -50%) rotate(45deg);
}

/* =========================
   Header: スクロールでメニューテキストを消す（トップのみ）
========================= */
.page-home.is-top-compact .menu-text{
  opacity: 0;
  width: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 180ms ease;
}

/* =========================
   Desktop (>=960px): 2カラム（左60 / 右40）
========================= */
@media (min-width: 960px){
  .page-home .top-hero__inner{
    grid-template-columns: 55% 45%;
  }

  /* 右カラム表示、スマホintroを隠す */
  .page-home .top-hero__side{
    display: block;
    color: var(--top-text);
    padding: 18px 24px; /* 右側だけ余白を作る */
  }
}

/* =========================
   Mobile
========================= */
@media (max-width: 959px){
  .page-home .top-hero__kv{
    min-height: 80vh;
  }
  .page-home .top-hero__kvFront{
    width: min(520px, 92%);
    aspect-ratio: 4 / 3;
  }
    .page-home .top-hero {
    min-height: 85vh;
  }

}



/* =========================
   メインKV下：SCROLL → サムネ
   （absoluteをやめて通常フローに）
========================= */

/* スクロール：メインKV直下・中央 */
.page-home .top-hero__scroll{
  position: relative;          /* ← absoluteをやめる */
  z-index: 7;

  margin: 18px auto 14px;      /* ← KV直下の余白 */
  display: grid;
  place-items: center;
  gap: 6px;

  padding: 10px 14px;
  border-radius: 14px;

  background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.88);

  cursor: pointer;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* アイコン */
.page-home .top-hero__scrollIcon{
  width: 26px;
  height: 18px;
  display: inline-block;
  position: relative;
}
.page-home .top-hero__scrollIcon::before,
.page-home .top-hero__scrollIcon::after{
  content:"";
  position:absolute;
  left: 50%;
  width: 18px;
  height: 18px;
  border-right: 3px solid rgba(255,255,255,.86);
  border-bottom: 3px solid rgba(255,255,255,.86);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 2px;
}
.page-home .top-hero__scrollIcon::before{ top:-2px; opacity:.95; }
.page-home .top-hero__scrollIcon::after{ top:6px; opacity:.55; }

.page-home .top-hero__scrollText{
  font-size: 12px;
  letter-spacing: .10em;
  opacity: .78;
}

/* サムネ：スクロールの下・中央 */
.page-home .top-hero__kvSwitch{
  position: relative;          /* ← absoluteをやめる */
  z-index: 7;

  width: fit-content;
  margin: 40px auto 18px;         /* ← KV下ブロックの最下部余白 */

  display: flex;
  gap: 16px;
}



 .page-home .top-hero__kvFrontWrap{
  position: relative;
  z-index: 4;
  padding-top: 72px;
  display: flex;
  justify-content: center;

  /* ✅ これを追加：下にUI（scroll/switch）を置くための安定した流れ */
  flex-direction: column;
  align-items: center;
}

/* PCではSCROLLを非表示 */
@media (min-width: 960px){
  .page-home .top-hero__scroll{
    display: none !important;
  }
}

/* =========================
   Right column (PC only) : デザイン画像寄せ
========================= */
@media (min-width: 960px){
  .page-home .top-hero__inner{
    grid-template-columns: 55% 45%; /* 既に合わせてる前提。必要ならここだけ微調整 */
  }

  .page-home .top-hero__side{
    display: block;
    padding: 86px 56px 0 34px; /* ← 右の余白を増やして“空気感”を作る */
    max-width: 620px;          /* ← 文章が横に伸びすぎない */
  }

  .page-home .top-hero__lead{
    margin: 0 0 40px;
    line-height: 2.0;
    font-size: 15px;
    color: rgba(255,255,255,.82);
  }

  /* ボタン：主導線は横長・2段目は均等 */
  .page-home .top-hero__actions{
    gap: 14px;
    margin: 0 0 40px;
  }
  .page-home .top-btn--primary{
    min-height: 56px;
    font-size: 15px;
  }
  .page-home .top-hero__actionsRow{
    gap: 14px;
  }

  /* Updates 見出し：左寄せ＋右に“更新一覧へ→” */
  .page-home .top-updates{
    margin-top: 6px;
  }
  .page-home .top-updates__head{
    margin: 0 0 14px;
    align-items: flex-end;
  }
  .page-home .top-updates__title{
    font-size: 20px;
    margin: 0;
    color: rgba(255,255,255,.86);
  }
  .page-home .top-updates__en{
    margin-top: 6px;
  }

  /* “更新一覧へ→” を少し大きく/押しやすく */
  .page-home .top-updates__more{
    min-height: 38px;
    padding: 8px 16px;
    border-radius: 999px;
  }

  /* 更新カード：横長・角丸大きめ・右の矢印丸 */
  .page-home .top-updates__card{
    width: 100%;
    max-width: 560px;
    padding: 16px 56px 16px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.26);
  }
  .page-home .top-updates__cardTitle{
    font-size: 14px;
    line-height: 1.5;
  }
  .page-home .top-updates__go{
    right: 16px;
    width: 36px;
    height: 36px;
  }
}
@media (min-width: 960px){
  /* 右カラム内の導線ブロック幅を整える（必要なら） */
  .page-home .top-hero__actions{
    max-width: 520px;   /* 右カラムで伸びすぎ防止。不要なら消してOK */
  }

  /* 2つのボタンを均等幅で揃える */
  .page-home .top-hero__actionsRow{
    display: flex;      /* grid→flexにして安定させる */
    gap: 14px;          /* ボタン間隔 */
  }

  .page-home .top-hero__actionsRow .top-btn{
    flex: 1;            /* ← 2つを同じ幅に */
    min-width: 0;
    justify-content: center;
  }

  /* 2段目のボタンだけ、少し高さを低くして“サブ感”を出す（不要なら削除） */
  .page-home .top-hero__actionsRow .top-btn{
    min-height: 46px;
    padding-block: 10px;
  }
}

@media (min-width: 960px){
  .page-home .top-hero__actionsRow{ margin-top: 20px; }
}


/* =========================
   Mobile restore (<=959px)
   intro削除 → top-hero__side をスマホの“KV下”として使う
========================= */
@media (max-width: 959px){
  /* Hero全体：KV + 下の情報で高さが伸びるのでmin-heightは軽めに */
  .page-home .top-hero{
    min-height: auto;
    overflow: visible; /* 下に伸びるので hidden を避ける（必要なら） */
  }

  .page-home .top-hero__inner{
    grid-template-columns: 1fr;
  }

  /* KVは上の画面占有を維持 */
  .page-home .top-hero__kv{
    min-height: 80vh; /* あなたの現在値を踏襲 */
  }

  /* ====== ここが“元top-intro”相当 ====== */
  .page-home .top-hero__side{
    display: block;
    padding: 0 18px 70px;     /* 下に余白（固定UIと被り防止） */
    max-width: 520px;         /* 元のtop-intro__inner相当 */
    margin: 0 auto;
    color: var(--top-text);
  }

  /* 右上テキスト（lead）を少し大きく */
  .page-home .top-hero__lead{
    margin: 0;
    padding-top: 30px;        /* 元 top-intro__inner の padding-top を移植 */
    margin-bottom: 30px;      /* 元 top-intro__text の margin を移植 */
    line-height: 1.85;
    font-size: 15px;          /* “もう少し大きく” */
    color: rgba(255,255,255,.82);
  }

  /* 導線（ボタン群） */
  .page-home .top-hero__actions{
    display: grid;
    gap: 12px;
    margin-bottom: 30px;
  }

  .page-home .top-hero__actionsRow{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  /* ボタン（スマホ版の元設定） */
  .page-home .top-btn{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    padding: 12px 18px;
    border-radius: var(--top-radius);
    border: 2px solid rgba(255,255,255,.55);
    color: rgba(255,255,255,.80);
    text-decoration: none;
    background: rgba(255,255,255,.03);
    box-shadow: 0 10px 22px rgba(0,0,0,.22);
  }

  .page-home .top-btn--primary{
    width: 100%;
    min-height: 54px;
    font-size: 15px;
    border-color: rgba(255,255,255,.62);
  }

  /* 更新（スマホ版：そのままOK） */
  .page-home .top-updates{ margin-top: 10px; }

  /* 小さい端末：2ボタンを縦に */
  @media (max-width: 360px){
    .page-home .top-hero__actionsRow{
      grid-template-columns: 1fr;
    }
  }


}