:root{
    --ink:#15150f;
    --paper:#fbfaf4;
    --paper-2:#f2f0e4;
    --lime:#e6ff3c;
    --lime-deep:#c8e610;
    --sky:#2f8fc4;
    --coral:#ff6a4d;
    --line: rgba(21,21,15,0.14);
    --maxw: 1180px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Noto Sans JP','Archivo',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .display{
    font-family:'Anton','Noto Sans JP',sans-serif;
    letter-spacing:0.01em;
  }
  a{color:inherit;text-decoration:none;}
  img,svg{display:block;max-width:100%;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--lime); color:var(--ink);
    padding:15px 30px; border-radius:100px;
    font-weight:800; font-size:15px;
    border:2px solid var(--ink);
    transition:transform .15s ease;
  }
  .btn:hover{ transform: translateY(-2px); }
  .btn.small{ padding:10px 20px; font-size:13px; }
  .btn.ghost{
    background:transparent; color:var(--ink); border:2px solid var(--ink);
  }
  .eyebrow{ font-size:13px; font-weight:700; color:var(--sky); }

  /* ---------- HEADER ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(251,250,244,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 28px; max-width:var(--maxw); margin:0 auto;
  }
  .logo{ font-weight:800; font-size:14px; line-height:1.2; }
  .navlinks{ display:flex; gap:34px; font-size:14px; font-weight:500; }
  @media (max-width: 860px){ .navlinks{ display:none; } }

  /* ---------- HERO BANNER (single unified image) ---------- */
  .hero-banner{ line-height:0; }
  .hero-banner img{ display:block; width:100%; height:auto; }

  /* ---------- HERO ---------- */
  /* Two deliberate states:
     - wide screens: text card on the left, full (uncropped) image on the right
     - narrow screens: image on top, text block below                         */
  .hero{
    position:relative;
    border-bottom:1px solid var(--line);
  }
  .hero-media{
    display:grid;
    grid-template-columns: 1fr 1fr;
    align-items:stretch;
    min-height:520px;
  }
  .hero-image-wrap{
    position:relative;
    overflow:hidden;
    background:var(--paper);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
  }
  .hero-bg{
    width:100%;
    height:100%;
    max-height:640px;
    object-fit:contain;
  }
  .hero-content{
    position:relative; z-index:2;
    display:flex;
    flex-direction:column;
    justify-content:center;
    max-width:560px;
    width:100%;
    margin:0 auto;
    background:var(--paper);
    padding:56px 48px;
  }
  @media (max-width:900px){
    .hero-content{ max-width:none; margin:0; padding:44px 34px; }
  }
  @media (max-width:760px){
    .hero-media{ grid-template-columns:1fr; min-height:auto; }
    .hero-image-wrap{ order:1; padding:0; }
    .hero-content{ order:2; padding:36px 22px 40px; }
  }
  .hero-pre{ font-size:14px; font-weight:700; color:var(--sky); margin-bottom:6px; }
  .wordmark{
    font-size:76px; line-height:0.92; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  }
  .wordmark .ball{ width:56px; height:56px; }
  @media (max-width:520px){ .wordmark{ font-size:52px; } .wordmark .ball{width:38px;height:38px;} }
  .subline{ margin-top:14px; font-weight:700; font-size:15px; letter-spacing:0.02em; }
  .headline{ margin-top:22px; font-size:27px; font-weight:900; line-height:1.45; }
  .datebox{ margin-top:26px; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
  .datebox .big{ font-size:26px; font-weight:900; }
  .venue-tag{
    display:inline-block; margin-top:10px; font-size:12px; font-weight:700;
    border:1.5px solid var(--ink); border-radius:100px; padding:5px 14px;
  }
  .place{ margin-top:6px; font-size:14px; font-weight:500; color:#3b3a30; }
  .price{ margin-top:14px; font-size:16px; font-weight:800; }
  .badges{ margin-top:16px; display:flex; gap:20px; font-size:13px; font-weight:700; flex-wrap:wrap; }
  .badges span{ display:flex; align-items:center; gap:8px; }
  .cta-row{ margin-top:30px; }

  .hero-image-wrap .vertical-tag{
    position:absolute; z-index:2; bottom:26px; right:30px; color:var(--ink); font-family:'Anton',sans-serif;
    font-size:18px; line-height:1.15; text-align:right; text-transform:uppercase; opacity:.7;
  }
  @media (max-width:760px){ .hero-image-wrap .vertical-tag{ font-size:14px; bottom:14px; right:16px; } }

  /* ---------- INTRO ---------- */
  .intro{
    display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center;
    padding:90px 28px; max-width:var(--maxw); margin:0 auto;
  }
  @media (max-width:900px){ .intro{ grid-template-columns:1fr; padding:60px 24px; gap:34px;} }
  .intro h2.eyebrow-lg{ font-size:14px; font-weight:700; color:var(--sky); margin:0 0 8px; }
  .intro h3{ font-size:34px; font-weight:900; line-height:1.35; margin:0 0 22px; }
  .intro p{ font-size:15px; line-height:2; color:#3b3a30; margin:0 0 30px; }
  .venue-photo{
    border-radius:18px; overflow:hidden; aspect-ratio:5/4;
    background:linear-gradient(135deg,#dce8ee,#aacfe0 40%, #eef6c8 100%);
    position:relative;
  }

  /* ---------- WHAT IS PICKLEBALL ---------- */
  .pball-intro{
    max-width:760px; margin:0 auto; padding:70px 28px 20px;
    text-align:center;
  }
  .pball-intro .badge{
    display:inline-block; background:var(--lime); color:var(--ink);
    font-weight:800; font-size:13px; padding:6px 18px; border-radius:100px;
    border:1.5px solid var(--ink); margin-bottom:18px;
  }
  .pball-intro h2{
    font-size:15px; font-weight:700; color:var(--sky); margin:0 0 6px;
    letter-spacing:0.02em;
  }
  .pball-intro h3{
    font-family:'Anton'; font-size:34px; letter-spacing:0.02em; margin:0 0 24px;
  }
  @media (max-width:520px){ .pball-intro h3{ font-size:26px; } }
  .pball-intro p{
    font-size:15px; line-height:2; color:#3b3a30; margin:0 0 16px;
  }
  .pball-intro p:last-child{ margin-bottom:0; }

  /* ---------- 5 TILES ---------- */
  .tiles{
    display:grid; grid-template-columns:repeat(5,1fr);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  @media (max-width:900px){ .tiles{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:520px){ .tiles{ grid-template-columns:1fr; } }
  .tile{
    padding:0 0 26px; border-right:1px solid var(--line);
  }
  .tile:last-child{ border-right:none; }
  .tile-photo{
    width:100%; aspect-ratio:1/1; overflow:hidden; margin-bottom:18px;
  }
  .tile-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .tile p{ font-size:13px; line-height:1.85; color:#4b4a3e; margin:0; padding:0 24px; }

  /* ---------- BANNER ---------- */
  /* Image and text are kept as separate layers: .banner-bg (photo),
     .banner-overlay (tint for contrast), .banner-content (HTML text). */
  .banner{
    position:relative;
    overflow:hidden;
    min-height:520px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:60px 24px;
  }
  .banner-bg{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center 42%;
  }
  .banner-overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(10,8,12,0.28) 0%, rgba(10,8,12,0.5) 100%);
  }
  .banner-content{
    position:relative; z-index:2;
    max-width:720px; width:100%;
    text-align:center; color:#fff;
    background:rgba(10,8,12,0.42);
    border-radius:20px;
    padding:44px 40px;
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
  }
  .banner h2{ font-family:'Anton'; font-size:54px; margin:0; letter-spacing:0.02em; line-height:1.05; }
  .banner .sub1{ margin-top:18px; font-weight:700; font-size:15px; }
  .banner .sub2{ margin-top:14px; font-size:14px; line-height:1.9; opacity:.92; }
  @media (max-width:700px){
    .banner{ min-height:420px; padding:40px 18px; }
    .banner-content{ padding:32px 24px; border-radius:16px; }
    .banner h2{ font-size:34px; }
    .banner .sub1{ font-size:13px; }
    .banner .sub2{ font-size:13px; line-height:1.75; }
  }
  @media (max-width:420px){
    .banner h2{ font-size:26px; }
  }

  /* ---------- HOW TO ---------- */
  .howto-head{ padding:80px 28px 20px; max-width:var(--maxw); margin:0 auto; }
  .howto-head .eyebrow-lg{ font-size:14px; font-weight:700; color:var(--sky); margin:0 0 6px; }
  .howto-head h3{ font-size:30px; font-weight:900; margin:0; }
  .steps{
    display:grid; grid-template-columns:repeat(5,1fr); gap:14px;
    max-width:var(--maxw); margin:0 auto; padding:30px 28px 90px; align-items:start;
  }
  @media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:520px){
    .step .circle{ width:120px; height:120px; }
    .step .num{ width:32px; height:32px; font-size:14px; }
  }
  .step{ text-align:center; }
  .step .circle{
    width:150px; height:150px; border-radius:50%; margin:0 auto 18px;
    display:flex; align-items:center; justify-content:center; position:relative;
    border:2px solid var(--ink); overflow:hidden;
  }
  .step .circle img{ width:100%; height:100%; object-fit:cover; }
  .step .num{
    position:absolute; top:-10px; left:-10px; background:var(--ink); color:var(--lime);
    font-family:'Anton'; font-size:16px; width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; z-index:2;
  }
  .step h5{ font-size:17px; font-weight:800; margin:0 0 4px; }
  .step p{ font-size:13px; color:#5c5a4d; margin:0; }
  .step .step-time{
    display:block; margin-top:8px; font-family:'Anton'; font-size:12px;
    letter-spacing:0.02em; color:var(--sky); background:#eef6fb;
    border-radius:100px; padding:6px 10px;
  }
  @media (max-width:520px){ .step .step-time{ font-size:10.5px; padding:5px 8px; } }

  /* ---------- WELCOME STRIP ---------- */
  .welcome{ display:grid; grid-template-columns:1fr 1fr; }
  @media (max-width:800px){ .welcome{ grid-template-columns:1fr; } }
  .welcome > div{
    position:relative; overflow:hidden; min-height:320px;
    display:flex; align-items:center;
  }
  .welcome-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:100% center; }
  .welcome-scrim{ position:absolute; inset:0; }
  .welcome .a .welcome-scrim{
    background:linear-gradient(90deg, rgba(233,245,223,0.96) 0%, rgba(233,245,223,0.8) 42%, rgba(233,245,223,0.15) 78%);
  }
  .welcome .b .welcome-scrim{
    background:linear-gradient(90deg, rgba(220,236,245,0.96) 0%, rgba(220,236,245,0.8) 42%, rgba(220,236,245,0.15) 78%);
  }
  @media (max-width:800px){
    .welcome .a .welcome-scrim{ background:linear-gradient(180deg, rgba(233,245,223,0.35) 0%, rgba(233,245,223,0.96) 65%); }
    .welcome .b .welcome-scrim{ background:linear-gradient(180deg, rgba(220,236,245,0.35) 0%, rgba(220,236,245,0.96) 65%); }
  }
  .welcome-content{ position:relative; z-index:2; padding:56px 40px; max-width:400px; }
  @media (max-width:520px){ .welcome-content{ padding:36px 26px; } }
  .welcome h4{ font-family:'Anton'; font-size:22px; margin:0 0 8px; }
  .welcome p{ font-size:13px; line-height:1.8; margin:0; color:#3b3a30; }




  /* ---------- VENUE ---------- */
  /* Image and text kept separate: .venue-bg (photo), .venue-overlay (tint), .venue-info (HTML text) */
  .venue{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    min-height:440px;
    max-width:var(--maxw); margin:80px auto; border-radius:20px;
  }
  .venue-bg{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  }
  .venue-overlay{
    position:absolute; inset:0;
    background:linear-gradient(100deg, rgba(10,8,12,0.72) 0%, rgba(10,8,12,0.42) 48%, rgba(10,8,12,0.12) 80%);
  }
  @media (max-width:860px){
    .venue{ margin:60px 20px; min-height:380px; }
    .venue-overlay{ background:linear-gradient(180deg, rgba(10,8,12,0.35) 0%, rgba(10,8,12,0.78) 75%); }
  }
  .venue-info{
    position:relative; z-index:2;
    padding:50px 48px; max-width:520px; color:#fff;
  }
  .venue-info .eyebrow-lg{ font-size:13px; font-weight:700; color:var(--lime); margin:0 0 10px; }
  .venue-info h3{ font-size:24px; font-weight:900; margin:0 0 16px; line-height:1.4; color:#fff; }
  .venue-info p{ font-size:14px; line-height:1.9; color:rgba(255,255,255,0.92); margin:0 0 24px; }
  .venue-info .btn.ghost{ border-color:#fff; color:#fff; }
  @media (max-width:520px){
    .venue-info{ padding:34px 26px; }
    .venue-info h3{ font-size:20px; }
  }

  /* ---------- EVENT INFO ---------- */
  .info-section{
    display:grid; grid-template-columns:1.4fr 1fr; gap:60px;
    max-width:var(--maxw); margin:0 auto; padding:80px 28px 100px; border-top:1px solid var(--line);
  }
  @media (max-width:900px){ .info-section{ grid-template-columns:1fr; gap:40px; } }
  .info-section .eyebrow-lg{ font-size:13px; font-weight:700; color:var(--sky); margin:0 0 6px; }
  .info-section h3.wm{ font-family:'Anton'; font-size:30px; margin:6px 0 30px; }
  table.info-table{ width:100%; border-collapse:collapse; }
  table.info-table th, table.info-table td{
    text-align:left; padding:16px 0; border-bottom:1px solid var(--line);
    font-size:14px; vertical-align:top;
  }
  table.info-table th{ width:120px; font-weight:700; color:#6b6a5e; }
  table.info-table td{ font-weight:500; }
  .info-side{ display:flex; flex-direction:column; align-items:flex-start; gap:26px; }
  .info-side .catch{ font-size:20px; font-weight:900; line-height:1.6; }
  .info-side .brand{ font-size:13px; font-weight:700; line-height:1.7; color:#4b4a3e; }

  /* ---------- CLOSING (shared background photo) ---------- */
  .closing{ position:relative; overflow:hidden; }
  .closing-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%; }
  .closing-overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(10,8,15,0.28) 0%, rgba(10,8,15,0.5) 45%, rgba(10,8,15,0.78) 100%);
  }
  .footer-cta{
    position:relative; z-index:2; padding:100px 28px 60px; color:#fff; text-align:left;
  }
  .footer-inner{
    max-width:var(--maxw); margin:0 auto;
    display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:end;
  }
  @media (max-width:860px){ .footer-inner{ grid-template-columns:1fr; } }
  .footer-cta h2{ font-size:28px; font-weight:900; line-height:1.5; margin:0 0 16px; }
  .footer-cta h2 .lime-em{ color:var(--lime); }
  .footer-script{ font-family:'Anton'; font-size:20px; margin-top:20px; opacity:.9; }
  .footer-right{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
  .footer-right .wm-small{ font-family:'Anton'; font-size:26px; }
  .footer-right .tagline{ font-size:12px; font-weight:700; line-height:1.6; opacity:.85; }

  /* Final band */
  .final-band{
    position:relative; z-index:2;
    display:grid; grid-template-columns:1.2fr 1fr; align-items:center;
    color:#fff;
  }
  @media (max-width:860px){ .final-band{ grid-template-columns:1fr; } }
  .final-left{ padding:50px 48px 70px; }
  .final-left h2{ font-size:26px; font-weight:900; line-height:1.55; margin:0 0 10px; }
  .final-left .script{ font-family:'Anton'; font-size:18px; color:var(--lime); margin-top:22px; }
  .final-right{
    padding:50px 48px 70px;
    background:rgba(10,8,15,0.4);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    display:flex; flex-direction:column; gap:16px;
  }
  .final-right .wm{ font-family:'Anton'; font-size:30px; }
  .final-right .meta{ font-size:13px; font-weight:700; }
  .final-right .venue-tag{ border-color:#fff; color:#fff; }

  section{ position:relative; }

  /* ---------- SCHEDULE (当日の流れ) ---------- */
  .schedule{ padding:90px 28px 100px; max-width:var(--maxw); margin:0 auto; border-top:1px solid var(--line); }
  .schedule-head{ margin-bottom:40px; }
  .schedule-head h3{ font-size:30px; font-weight:900; margin:6px 0 0; }
  .schedule-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
  @media (max-width:760px){ .schedule-grid{ grid-template-columns:1fr; gap:40px; } }
  .part-label{
    font-family:'Anton'; font-size:20px; margin-bottom:20px; padding-bottom:12px;
    border-bottom:2px solid var(--ink);
  }
  .timeline{ list-style:none; margin:0; padding:0; }
  .timeline li{
    display:flex; gap:18px; align-items:baseline; padding:12px 0;
    border-bottom:1px solid var(--line);
  }
  .timeline li:last-child{ border-bottom:none; }
  .timeline .time{
    flex:0 0 64px; font-family:'Anton'; font-size:15px; color:var(--sky);
  }
  .timeline .label{ font-size:14px; font-weight:600; color:#3b3a30; }

  /* simple icon svgs share stroke */
  .icon{ stroke:var(--ink); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }

  /* ---------- HERO BANNER fallback (no upcoming events) ---------- */
  .pg-hero-fallback{ position:relative; }
  .pg-hero-fallback-label{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(21,21,15,0.45); color:#fff; font-family:'Anton',sans-serif;
    font-size:clamp(18px,2.6vw,26px); letter-spacing:0.04em; text-align:center; padding:24px;
  }


/* 11/1等、申込URL公開前のバナー内「参加申し込み」クリック領域 */
.hero-banner{ position:relative; }
.hero-banner-cta-overlay{
  position:absolute;
  left:40.2%; top:82.0%; width:20.0%; height:10.5%;
  z-index:3; border:0; padding:0; margin:0;
  background:transparent; cursor:pointer; border-radius:999px;
}
.hero-banner-cta-overlay:focus-visible{
  outline:3px solid #fff; outline-offset:2px;
}
@media (max-width:760px){
  .hero-banner-cta-overlay{ left:40.0%; top:81.5%; width:20.5%; height:11%; }
}