@charset "UTF-8";

/* =====================================================
   VIP SECTION – AKANE (Brand-Tokenized / 静)
   - CTAは “子テーマの .vip-btn” に完全委譲（全ページで線幅統一）
   - VIP側ではCTAの display/padding/after を触らない
===================================================== */

.vip{
  background: var(--brand-bg);
  padding: 120px 0;

  --vip-gap-2: 80px;
  --vip-gap-3: 34px;
  --vip-gap-5: 44px;

  width:100%;
}

@media (max-width:768px){
  .vip{
    padding: 96px 0;

    --vip-gap-2: 48px;
    --vip-gap-3: 24px;
    --vip-gap-5: 34px;
  }
}

/* -----------------------------------------------------
   Container
----------------------------------------------------- */

.vip .container{
  text-align:center;
}

/* -----------------------------------------------------
   Image Slider
----------------------------------------------------- */

.vip-image{
  margin: 0 0 var(--vip-gap-3);
}

.vip-image .swiper{
  width:100%;
}

.vip-image .swiper-wrapper,
.vip-image .swiper-slide{
  height:auto;
}

.vip-image img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

/* -----------------------------------------------------
   Text Area
----------------------------------------------------- */

.vip-text{
  max-width: 640px;
  margin: 0 auto var(--vip-gap-5);
  text-align:center;
}

.vip-text p{
  font-size: var(--akane-body-size);
  line-height: var(--akane-body-lh);
  letter-spacing: var(--akane-body-track);
  color: var(--brand-muted);
  margin:0;
}

.vip-text p + p{
  margin-top: 18px;
}

@media (max-width:768px){
  .vip-text p{
    font-size:14px;
    line-height:2.15;
  }
  .vip-text p + p{
    margin-top:14px;
  }
}

/* -----------------------------------------------------
   CTA
   - ここでは触らない（子テーマの .vip-btn に完全委譲）
----------------------------------------------------- */

/* VIP内だけ hover の “間” を少し整えたい場合だけ、opacity/transform “だけ” 許可 */
.vip .vip-btn:hover{
  opacity:.72;
  transform:translateY(1px);
}

/* -----------------------------------------------------
   Motion Safety
----------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  .vip .vip-btn{
    transition:none !important;
    transform:none !important;
  }
}