/* =========================================================
   RIDE GIRLS / MOVIES — 完全独立のCSS
   既存のCOMIC・EXTRA・GALLERY・NEWSには影響しない
   ========================================================= */
#movies.rg-movies,
.rg-movies-page .rg-movies-page-section {
  background: #17171b;
  color: #f4f3f5;
  padding: 95px 0 110px;
  min-height: auto;
}
.rg-movies-inner { width: min(90%, 1500px); margin: 0 auto; }
.rg-movies-heading {
  display: flex; justify-content: space-between; align-items: end;
  gap: 24px; margin-bottom: 40px;
}
.rg-movies-eyebrow {
  margin: 0 0 12px; color: #b896ec;
  font-size: 11px; font-weight: 800; letter-spacing: .23em;
}
.rg-movies-heading h2,
.rg-movies-heading h1 {
  margin: 0; font-size: clamp(52px, 6.3vw, 92px);
  line-height: .95; font-weight: 900; letter-spacing: -.06em;
  color: #f6f5f7;
}
.rg-movies-subtitle { margin: 17px 0 0; color: #a9a7b0; font-size: 13px; }
.rg-movies-all {
  color: #f4f3f5; font-size: 11px; font-weight: 800;
  text-decoration: none; letter-spacing: .1em;
  border-bottom: 2px solid #8955d0; padding: 0 0 7px; white-space: nowrap;
}
.rg-movies-all:hover, .rg-movies-all:focus-visible { color: #c8a5ff; }
.rg-movies-home { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 22px; }
.rg-movies-side { display: grid; grid-template-columns: 1fr; gap: 20px; }
.rg-movies-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 18px; }
.rg-movie-card { min-width: 0; }
.rg-movie-link { display: block; color: inherit; text-decoration: none; }
.rg-movie-visual {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #2e283a, #151519 62%, #241a32);
  overflow: hidden; border: 1px solid #38323f;
}
.rg-movie-visual::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: repeating-linear-gradient(135deg, transparent 0 44px, rgba(147,92,216,.08) 44px 46px);
}
.rg-movie-visual img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.rg-movie-link:hover img { transform: scale(1.035); }
.rg-movie-play {
  position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border: 1px solid rgba(255,255,255,.75);
  border-radius: 50%; display: grid; place-items: center;
  background: rgba(12,10,17,.65); color: white; font-size: 24px; padding-left: 3px;
  transition: background .2s ease, border-color .2s ease;
}
.rg-movie-link:hover .rg-movie-play,
.rg-movie-link:focus-visible .rg-movie-play { background: #7544b8; border-color: #cbb1f3; }
.rg-movie-visual .rg-movie-category {
  position: absolute; left: 13px; top: 13px; z-index: 1;
  background: rgba(20,16,25,.82); border-left: 3px solid #9258d8;
  padding: 6px 9px; color: #f6f4f8; font-size: 10px; letter-spacing: .13em; font-weight: 800;
}
.rg-movie-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 12px 0 5px; }
.rg-movie-meta time { font-size: 11px; color: #a9a5b2; letter-spacing: .07em; }
.rg-movie-title { font-size: clamp(16px, 1.5vw, 22px); font-weight: 800; line-height: 1.45; color: #f4f3f5; margin: 0; }
.rg-movie-link:hover .rg-movie-title { color: #c6a4f5; }
.rg-movie-description { color: #b3b0b9; font-size: 12px; margin: 7px 0 0; line-height: 1.75; }
.rg-movies-side .rg-movie-title { font-size: 16px; }
.rg-movies-side .rg-movie-play { width: 43px; height: 43px; font-size: 19px; }
.rg-movies-empty { border: 1px solid #403947; background: #222027; padding: 44px 20px; color: #aaa6b1; text-align: center; grid-column: 1 / -1; font-size: 14px; }
.rg-movies-page { margin: 0; background: #17171b; color: #f4f3f5; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Helvetica Neue", Arial, sans-serif; }
.rg-movies-page *, .rg-movies-page *::before, .rg-movies-page *::after { box-sizing: border-box; }
.rg-movies-page-header { padding: 22px 5%; display: flex; justify-content: space-between; gap: 12px; background: #222126; font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.rg-movies-page-header a { color: #f5f4f6; text-decoration: none; }
.rg-movies-page-header span { color: #a5a1ad; }
.rg-movies-page-tag { font-size: 11px; font-weight: 800; letter-spacing: .13em; color: #8c8892; }
.rg-movies-page-footer { text-align: center; padding: 30px; background: #111115; color: #8f8b94; font-size: 11px; }
/* Dialog: 動画はクリックするまで生成しない */
.rg-movie-dialog { border: 1px solid #4a3b58; background: #17151c; color: #fff; padding: 0; width: min(94vw, 980px); max-width: 980px; max-height: 95vh; max-height: 95dvh; }
.rg-movie-dialog::backdrop { background: rgba(0,0,0,.88); }
.rg-movie-dialog-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 15px; }
.rg-movie-dialog-title { font-size: 14px; font-weight: 800; margin: 0; }
.rg-movie-dialog-close { cursor: pointer; background: transparent; color: white; border: 1px solid #6b6073; padding: 8px 12px; font-size: 12px; }
.rg-movie-dialog-video-wrap { display: flex; justify-content: center; align-items: center; background: #000; max-height: calc(95dvh - 65px); }
.rg-movie-dialog video { display: block; width: 100%; max-height: calc(95dvh - 65px); object-fit: contain; background: black; }
.rg-movie-dialog video.rg-video-portrait { width: auto; max-width: 100%; }
@media (max-width: 900px) { .rg-movies-home { grid-template-columns: 1fr; } .rg-movies-side { grid-template-columns: repeat(2, minmax(0,1fr)); } .rg-movies-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) {
  main section#movies.rg-movies, .rg-movies-page .rg-movies-page-section { padding: 65px 7% 85px; }
  .rg-movies-inner { width: 100%; }
  .rg-movies-heading { align-items: start; flex-direction: column; gap: 20px; }
  .rg-movies-side { grid-template-columns: 1fr 1fr; gap: 12px; }
  .rg-movies-side .rg-movie-title { font-size: 13px; }
  .rg-movies-side .rg-movie-meta time { font-size: 10px; }
  .rg-movies-grid { gap: 18px 12px; }
  .rg-movie-title { font-size: 15px; }
  .rg-movie-description { font-size: 11px; }
  .rg-movie-play { width: 44px; height: 44px; font-size: 18px; }
  .rg-movies-page-header span, .rg-movies-page-tag { display: none; }
}
.rg-movies-home--single { grid-template-columns: minmax(0, 1fr); }
.rg-movies-home--single .rg-movie-featured { max-width: 920px; }
@media (prefers-reduced-motion: reduce) { .rg-movie-visual img, .rg-movie-play { transition: none; } }
