/* ===============================
   Video Page Styles
   =============================== */

body[data-page="video"],
.page-slug-video {
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,.18), rgba(0,0,0,.45)),
    var(--bg-videos) center top / cover fixed no-repeat !important;
}

/* 背景：テーマ変数で管理 
.video-page {
  color: #2a1a1a;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,.18), rgba(0,0,0,.45)),
    var(--bg-videos) center top / cover fixed repeat;
  padding-bottom: 60px;
}*/

/* 共通ラッパー */
.video-page .wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* タイトル */
.v-title {
  font-family: "Hangyaku", serif;
  text-align: center;
  font-size: clamp(32px, 6vw, 64px);
  margin: 28px 0 8px;
  color: #fff;
  text-shadow: 0 0 18px rgba(0,0,0,.35);
}

.v-lead {
  text-align: center;
  color: #f5e9e9;
  opacity: .9;
  margin-bottom: 22px;
}

/* グリッドレイアウト */
.v-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 14px auto 38px;
}
@media (max-width: 960px) {
  .v-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .v-grid { grid-template-columns: 1fr; }
}

/* カード */
.v-card {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .2s ease;
}
.v-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.v-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* ====== TVフレーム構造 ====== */
.v-tv {
  position: relative;
  aspect-ratio: 16/11;
  background: var(--tv-frame) center / contain no-repeat;
  --screen-top: 20%;
  --screen-right: 23%;
  --screen-bottom: 20%;
  --screen-left: 21%;
}

.v-screen {
  position: absolute;
  top: var(--screen-top);
  right: var(--screen-right);
  bottom: var(--screen-bottom);
  left: var(--screen-left);
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 12px rgba(0,0,0,.35);
}

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

/* タイトル（白枠付き） */
.v-caption {
  margin: 10px 12px 16px;
  background: #fff;
  color: #333;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: center;
  font-size: 1.05rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

/* 注意ボックス（下部テキスト） */
.v-note__box {
  background: rgba(10, 22, 35, .82);
  color: #eaf6ff;
  border: 1px solid rgba(173,216,230,.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow:
    inset 0 0 20px rgba(0,0,0,.12),
    0 10px 28px rgba(0,0,0,.18);
}
.v-note__lead {
  color: #d9f0ff;
  font-weight: 700;
}

/* 読みやすい補助クラス */
.video-note {
  background: rgba(10, 8, 20, .66);
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  backdrop-filter: blur(2px);
}
.video-note h2,
.video-note h3 {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.video-note p,
.video-note a {
  color: #f6f6f6;
}
.video-note a:hover {
  color: #fff;
  text-decoration: underline;
}
.video-thumbnail.coming-soon {
  background-color: #b30000; /* 深めの赤 */
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 4px;
  width: 100%;
  height: 100%;
}

/* ==== VIDEOページ専用：ヘッダー透明＆重なり順修正 ==== */
body[data-page="video"] .site-header,
body.page-slug-video .site-header,
.page-template-page-video .site-header{
  background: transparent !important;
  box-shadow: none !important;
  position: relative;
  z-index: 30;
}
body[data-page="video"] .header-inner,
body.page-slug-video .header-inner,
.page-template-page-video .header-inner{
  background: transparent !important;
}
.v-screen .coming-soon{
  background-color:#b30000;
  color:#fff;
  font-size:1.2rem;
  font-weight:bold;
  display:flex;
  align-items:center;
  justify-content:center;
  text-transform:uppercase;
  letter-spacing:2px;
  border-radius:4px;
  width:100%;
  height:100%;
}