@charset "UTF-8";

.page-vip-room{
  --vip-max:1040px;
  --vip-pad-pc:40px;
  --vip-pad-sp:18px;

  --vip-text:#111;
  --vip-muted:rgba(0,0,0,.72);
  --vip-line:rgba(0,0,0,.12);

  --vip-serif:var(--font-en,"Cinzel",serif);

  --vip-body-size:14px;
  --vip-body-lh:2.15;

  /* ★MV：原画像の明度を優先（フィルター無効） */
  --vip-mv-filter: none;

  background:#fff;
  color:var(--vip-text);
}

.page-vip-room img{
  max-width:100%;
  height:auto;
  display:block;
}

.page-vip-room figure{ margin:0; }

.page-vip-room .section{ padding:96px 0; }

.page-vip-room .container{
  max-width:var(--vip-max);
  margin:0 auto;
  padding:0 var(--vip-pad-pc);
}

/* =========================
   MV
========================= */
.page-vip-room .vip-mv{
  position:relative;
  overflow:hidden;
  background:#000;
}

.page-vip-room .vip-mv__media{
  position:relative;
  z-index:0;
}

.page-vip-room .vip-mv__media img{
  width:100%;
  height:clamp(420px,58vw,720px);
  object-fit:cover;
  object-position:center;

  /* ★原画の明度そのまま */
  filter: var(--vip-mv-filter);

  transform: scale(1.01);
}

/* ★透明の質感膜（明度は変えず、空気だけ足す） */
.page-vip-room .vip-mv::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.06),
    rgba(255,255,255,.02) 45%,
    rgba(0,0,0,.06)
  );
  mix-blend-mode: soft-light;
  opacity: 1;
}

.page-vip-room .vip-mv__overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  padding:0 24px;
  pointer-events:none;
  z-index:2;
}

.page-vip-room .vip-mv__overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.35));
}

.page-vip-room .vip-mv__content{
  position:relative;
  z-index:1;
  max-width:960px;
  color:#fff;
}

.page-vip-room .vip-mv__title{
  margin:0;
  font-family: var(--font-en,"Cinzel",serif);
  font-size: clamp(22px,3vw,34px);
  letter-spacing:.32em;
  font-weight:500;
  text-shadow:0 14px 34px rgba(0,0,0,.45);
}

.page-vip-room .vip-mv::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:140px;
  height:2px;
  background:linear-gradient(90deg, rgba(212,175,55,0), rgba(212,175,55,.9), rgba(212,175,55,0));
  z-index:3;
}

/* =========================
   INTRO
========================= */
.page-vip-room .vip-intro{
  padding:72px 0 54px;
}

.page-vip-room .vip-intro__inner{
  max-width:900px;
  margin:0 auto;
  text-align:center;
}

.page-vip-room .vip-intro p{
  margin:0;
  font-size:15px;
  line-height:2.4;
  letter-spacing:.08em;
  color:rgba(0,0,0,.72);
}

/* PCでは手動改行を活かす */
.page-vip-room .vip-intro p br{ display:inline; }

/* =========================
   SHOWCASE
========================= */
.page-vip-room .vip-showcase{
  padding:72px 0 40px;
}

.page-vip-room .vip-showcase__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:start;
}

.page-vip-room .vip-showcase__media{
  position:relative;
  overflow:hidden;
  background:#000; /* 灰完全防止 */
}

/* 暗幕 */
.page-vip-room .vip-showcase__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.18) 0%,
    rgba(0,0,0,.08) 40%,
    rgba(0,0,0,.25) 100%
  );
  pointer-events:none;
  z-index:3;
}

/* 高さ確保 */
.page-vip-room .vip-showcase__media.vip-fade::before{
  content:"";
  display:block;
  aspect-ratio:4 / 5;
}

/* 共通（フェードはそのまま） */
.page-vip-room .vip-showcase__media.vip-fade .vip-fade__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;

  opacity:0;
  transform:scale(1.02);

  animation:vipCrossFade 36s linear infinite;
  will-change:opacity, transform;
  z-index:2;
}

/* 2枚目は半周期遅らせる */
.page-vip-room .vip-showcase__media.vip-fade .vip-fade__img.is-2{
  animation-delay:-18s;
}

/* フェード（現状のまま） */
@keyframes vipCrossFade{
  0%   { opacity:0; transform:scale(1.02); }
  8%   { opacity:1; transform:scale(1.03); }
  45%  { opacity:1; transform:scale(1.06); }
  53%  { opacity:0; transform:scale(1.06); }
  100% { opacity:0; transform:scale(1.02); }
}

/* =========================
   テキスト側
========================= */
.page-vip-room .vip-showcase__kicker{
  font-family:var(--vip-serif);
  letter-spacing:.35em;
  font-size:13px;
  margin:0 0 22px;
  color:rgba(0,0,0,.55);
}

.page-vip-room .vip-showcase__prose p{
  margin:0;
  font-size:15px;
  line-height:2.5;
  letter-spacing:.08em;
  color:var(--vip-muted);
}

.page-vip-room .vip-showcase__prose p + p{
  margin-top:18px;
}

/* 黒丸完全除去 */
.page-vip-room .vip-showcase__list{
  margin:26px 0 0;
  padding:0;
  border-left:1px solid var(--vip-line);
}

.page-vip-room .vip-showcase__list li{
  list-style:none;
  padding:10px 0 10px 18px;
  font-size:14px;
  line-height:2.3;
  letter-spacing:.06em;
  color:rgba(0,0,0,.65);
}

/* =========================
   PRICING
========================= */
.page-vip-room .vip-pricing{
  padding:68px 0 96px;
}

.page-vip-room .vip-price-title{
  text-align:center;
  font-family:var(--vip-serif);
  letter-spacing:.32em;
  font-weight:500;
  font-size:clamp(18px,2vw,22px);
  margin:0 0 26px;
}

.page-vip-room .vip-dl{
  max-width:860px;
  margin:20px auto 0;
  border-top:1px solid var(--vip-line);
}

.page-vip-room .vip-dl__row{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  column-gap:16px;
  padding:16px 0;
  border-bottom:1px solid var(--vip-line);
}

.page-vip-room .vip-dl dt{
  font-weight:500;
  font-size:var(--vip-body-size);
  line-height:1.9;
}

.page-vip-room .vip-dl dd{
  text-align:right;
  font-size:var(--vip-body-size);
  line-height:1.9;
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:900px){
  .page-vip-room .vip-showcase__grid{
    grid-template-columns:1fr;
    gap:54px;
  }
}

@media(max-width:768px){
  .page-vip-room .container{
    padding:0 var(--vip-pad-sp);
  }

  .page-vip-room .vip-intro p,
  .page-vip-room .vip-showcase__prose p{
    font-size:14px;
    line-height:2.2;
  }

  .page-vip-room .vip-showcase__media.vip-fade::before{
    aspect-ratio:1 / 1;
  }

  /* ★SP版：手動改行を無効化して自然改行へ（これが戻ってた原因） */
  .page-vip-room .vip-intro p br{
    display:none;
  }

  .page-vip-room .vip-intro__inner{
    max-width:94%;
  }

  .page-vip-room .vip-intro p{
    letter-spacing:.05em;
    line-height:2.15;
  }
}