/* ============ 08 EVENT AREA 開催エリア ============ */
.area{
  background:url(../assets/pc/area-bg.webp) center / cover no-repeat;
  /* Sampled design band: #33373A (top) -> #766768 -> #868395 (bottom) — the
     raw photo is vivid neon, the design shows it desaturated and dark,
     lightening toward the pricing seam. */
  padding:88px 0 72px;
}
/* dark overlay over the night-street photo */
.area::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(32,34,38,.82) 0%,
    rgba(58,54,56,.72) 45%,
    rgba(120,116,132,.66) 85%,
    rgba(153,151,170,.72) 100%);
}
.area-inner{
  position:relative;
  z-index:1;
}
.area-eyebrow{
  font-size:16px;
  font-weight:500;
  line-height:1;
  color:#fff;
  text-align:center;
}
.area-title{
  margin-top:12px;
  font-size:32px;
  font-weight:700;
  line-height:1.4;
  color:#fff;
  text-align:center;
}
/* PC: row1 = 渋谷/新宿/上野, row2 = 梅田/栄 centered (flex-wrap) */
.area-cards{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:40px 24px;
  width:912px;
  margin:77px auto 0;
}
.area-card{
  width:288px;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
}
/* venue-N.png is a full pre-rendered card (shadow margin + white card +
   baked-in label). Crop out just the photo area.
   カード外形は x40-703 / y32-383 だが、その外形には **半径約30px の角丸が
   焼き込まれている**。外形ちょうどで切ると角の透明部分がカード内に入り、
   下の白地が角に覗く(2026-08-19「変な白いスペース」)。
   そこで各辺を10px内側に寄せて x50-693 / y42- を表示する。
   角丸rに対し必要なインセットは r(1-1/√2)=8.8px なので10pxで足りる。 */
.area-card-photo{
  height:153px;
  overflow:hidden;
}
.area-card-img{
  width:115.528%;              /* 744/644 */
  max-width:none;
  margin-left:-7.764%;         /* 50/644  */
  margin-top:-6.522%;          /* 42/644  */
}
.area-card-name{
  height:45px;
  line-height:45px;
  font-size:20px;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--ink);
  text-align:center;
}

@media (max-width:767px){
  .area{
    /* SP bg image continues down into PRICING — show its top here */
    background:url(../assets/sp/area-bg.webp) top center / cover no-repeat;
    padding:74px 0 10px;
  }
  .area-eyebrow{font-size:12px}
  .area-title{
    margin-top:12px;
    font-size:24px;
    line-height:1.45;
  }
  /* SP: 渋谷 alone centered, then 2x2 grid (新宿/上野/梅田/栄) */
  .area-cards{
    display:grid;
    grid-template-columns:repeat(2,166px);
    gap:16px 8px;
    justify-content:center;
    width:auto;
    margin:59px auto 0;
  }
  .area-card{
    width:auto;
    border-radius:12px;
  }
  .area-card--shibuya{
    grid-column:1 / -1;
    justify-self:center;
    width:166px;
  }
  .area-card-photo{
    height:88px;
  }
  .area-card-name{
    height:35px;
    line-height:35px;
    font-size:16px;
  }
  .area-card--shibuya .area-card-name{
    height:30px;
    line-height:30px;
  }
}