@font-face{
    font-family: "OsakaEvessa";
    src: url(data:font/otf;base64,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) format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  :root{
    --red:#E6001B;
    --red-deep:#a5000f;
    --black:#1E0E07;
    --black-soft:#2b1a10;
    --gold:#D4B274;
    --gold-soft:#eadfc7;
    --cream:#FBF6EE;
    --white:#FFFFFF;
    --ink:#1E0E07;
    --line: rgba(30,14,7,0.12);
    --shadow: 0 2px 8px rgba(30,14,7,0.08);
    --radius: 14px;
    --maxw: 600px;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:#e7e2da;
    color:var(--ink);
    font-family:"OsakaEvessa","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","IBM Plex Sans JP",sans-serif;
    font-weight:600;
    -webkit-font-smoothing:antialiased;
    line-height:1.7;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  ul{ margin:0; padding:0; }

  .jp-head{ font-family:"OsakaEvessa","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; font-weight:800; }
  .en-display{ font-family:"OsakaEvessa","Anton","IBM Plex Sans JP",sans-serif; font-weight:400; letter-spacing:0.02em; }

  .page{
    max-width:var(--maxw);
    margin:0 auto;
    background:var(--white);
    position:relative;
    box-shadow:none;
    overflow:hidden;
  }
  .wrap{ width:100%; }

  /* ---------- SAMPLE badge (nod to the brand guide's own "SAMPLE" page convention) ---------- */
  .sample-badge{
    position:sticky;
    top:0;
    z-index:50;
    background:var(--red);
    color:var(--white);
    text-align:center;
    font-size:11px;
    letter-spacing:0.14em;
    padding:6px 8px;
    font-weight:700;
  }
  .sample-badge span{ opacity:0.85; font-weight:500; letter-spacing:0.04em; }

  /* ---------- top utility bar ---------- */
  .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 16px;
    background:var(--white);
    border-bottom:1px solid var(--line);
  }
  .logo-lockup{
    display:flex; align-items:center; gap:8px;
  }
  .logo-mark{
    width:30px;height:30px;border-radius:50%;
    background:var(--red);
    display:flex;align-items:center;justify-content:center;
  }
  .logo-mark svg{ width:18px;height:18px; }
  .logo-word{
    font-family:"OsakaEvessa","Anton",sans-serif;
    font-size:15px;
    letter-spacing:0.02em;
    color:var(--black);
    line-height:1;
  }
  .logo-word b{ color:var(--red); }
  .topbar-tag{
    font-size:10px;
    color:var(--black);
    background:var(--gold-soft);
    padding:4px 9px;
    border-radius:20px;
    font-weight:700;
    letter-spacing:0.04em;
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    color:var(--white);
    background:
      linear-gradient(180deg, rgba(30,14,7,0.15) 0%, rgba(30,14,7,0.75) 78%, var(--black) 100%),
      var(--red);
    padding:0 0 28px;
    overflow:hidden;
  }
  .hero-mv{
    position:relative;
    aspect-ratio:4/5;
    background:
      radial-gradient(120% 90% at 30% 0%, rgba(255,255,255,0.14), transparent 55%),
      linear-gradient(160deg, var(--red-deep) 0%, var(--red) 45%, var(--black) 130%);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:22px 20px 0;
  }
  .skyline{
    position:absolute; left:0; right:0; bottom:0;
    height:46%;
    opacity:0.55;
  }
  .mv-playbadge{
    position:absolute;
    top:16px; right:16px;
    background:rgba(30,14,7,0.55);
    border:1px solid rgba(255,255,255,0.5);
    color:var(--white);
    font-size:10px;
    letter-spacing:0.1em;
    padding:5px 10px 5px 8px;
    border-radius:20px;
    display:flex;
    align-items:center;
    gap:5px;
  }
  .mv-playbadge svg{ width:11px; height:11px; fill:var(--white); }

  .hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:rgba(255,255,255,0.16);
    border:1px solid rgba(255,255,255,0.55);
    color:var(--white);
    font-size:11px;
    font-weight:700;
    letter-spacing:0.08em;
    padding:5px 12px;
    border-radius:20px;
    width:fit-content;
    margin-bottom:12px;
  }
  .hero-title{
    font-size:38px;
    line-height:1.02;
    margin:0 0 6px;
    text-shadow:0 6px 18px rgba(0,0,0,0.35);
  }
  .hero-title small{
    display:block;
    font-family:"OsakaEvessa","Anton","IBM Plex Sans JP",sans-serif;
  }
  .hero-sub{
    font-size:13px;
    font-weight:700;
    margin:10px 0 0;
    color:var(--gold-soft);
  }
  .hero-body{
    background:var(--black);
    padding:20px 20px 22px;
  }
  .hero-copy{
    font-size:13.5px;
    color:#f3ece2;
    margin:0 0 16px;
  }
  .hero-copy b{ color:var(--gold); }
  .hero-ctas{
    display:flex;
    gap:10px;
  }
  .btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-weight:700;
    font-size:13.5px;
    padding:13px 14px;
    border-radius:10px;
    flex:1;
    border:1px solid transparent;
    cursor:pointer;
  }
  .btn-primary{
    background:linear-gradient(135deg, var(--gold) 0%, #c39c5f 100%);
    color:var(--black);
    
  }
  .btn-ghost{
    background:transparent;
    border:1px solid rgba(255,255,255,0.55);
    color:var(--white);
  }
  .btn-block{ width:100%; }
  .btn-red{
    background:var(--red);
    color:var(--white);
    
  }
  .btn-outline-black{
    background:var(--white);
    border:1.5px solid var(--black);
    color:var(--black);
  }
  .btn small{ font-weight:500; }

  /* ---------- section shells ---------- */
  section{ padding:40px 20px; position:relative; }
  .sec-cream{ background:var(--cream); }
  .sec-white{ background:var(--white); }
  .sec-black{
    background:var(--black);
    color:var(--white);
  }
  .eyebrow{
    display:inline-block;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.16em;
    color:var(--red);
    background:rgba(230,0,27,0.08);
    padding:5px 10px;
    border-radius:6px;
    margin-bottom:10px;
  }
  .sec-black .eyebrow{
    color:var(--gold);
    background:rgba(212,178,116,0.14);
  }
  h2.sec-title{
    font-size:22px;
    margin:0 0 10px;
    line-height:1.35;
  }
  .sec-lead{
    font-size:13.5px;
    color:#4a3a2e;
    margin:0 0 22px;
  }
  .sec-black .sec-lead{ color:#d9cdbf; }

  /* ---------- highlights: full-bleed photo + bold floating ribbon ---------- */
  .feature-grid{ display:block; margin:24px -20px 0; }
  .feature-row{
    display:flex;
    flex-direction:column;
    gap:0;
    margin-bottom:28px;
  }
  .feature-row:last-child{ margin-bottom:0; }
  .feature-media{
    flex:none;
    position:relative;
    overflow:hidden;
  }
  .feature-media .photo-slot{
    border-radius:0;
    border:none;
    aspect-ratio:1/1;
    background:linear-gradient(155deg, var(--red-deep) 0%, var(--black) 78%) !important;
    color:rgba(255,255,255,0.7);
  }
  .feature-media .photo-slot.tint-gold{
    background:linear-gradient(155deg, #8a6d24 0%, var(--black) 78%) !important;
  }
  .feature-media .photo-slot.tint-red{
    background:linear-gradient(155deg, #7a1018 0%, var(--black) 78%) !important;
  }
  .feature-bignum{
    position:absolute;
    top:14px; left:16px;
    font-family:"OsakaEvessa","Anton",sans-serif;
    font-size:88px;
    line-height:1;
    color:transparent;
    -webkit-text-stroke:2px rgba(255,255,255,0.75);
    z-index:1;
    pointer-events:none;
  }
  .feature-ribbon{
    position:absolute;
    left:0; right:16%; bottom:18px;
    padding:18px 24px 18px 28px;
    color:var(--white);
    background:var(--red);
    box-shadow:0 3px 10px rgba(0,0,0,0.18);
    z-index:2;
  }
  .feature-ribbon-title{
    font-size:22px;
    line-height:1.3;
    margin:0 0 4px;
  }
  .feature-ribbon-en{
    font-size:11.5px;
    letter-spacing:0.16em;
    margin:0;
    opacity:0.9;
  }
  .feature-badge{
    position:absolute;
    top:-24px; right:22px;
    width:50px; height:50px;
    border-radius:50%;
    background:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 2px 6px rgba(0,0,0,0.2);
    z-index:3;
  }
  .feature-badge svg{ width:26px; height:26px; }
  .feature-text{
    flex:1;
    background:var(--white);
    padding:18px 20px 4px;
  }
  .feature-body{ font-size:12.5px; color:#5a4a3d; margin:0; line-height:1.7; }

  /* scroll-triggered slide-in (straight, no diagonal cuts) */
  .reveal-left, .reveal-right{
    opacity:0;
    transition:opacity .7s ease, transform .7s ease;
  }
  .reveal-left{ transform:translateX(-36px); }
  .reveal-right{ transform:translateX(36px); }
  .reveal-left.is-visible, .reveal-right.is-visible{
    opacity:1;
    transform:translateX(0);
  }
  @media (prefers-reduced-motion: reduce){
    .reveal-left, .reveal-right{ opacity:1 !important; transform:none !important; transition:none !important; }
  }

  /* ---------- game detail blocks ---------- */
  .game-detail{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:var(--shadow);
    margin-bottom:22px;
    overflow:hidden;
    scroll-margin-top:70px;
  }
  .game-detail-head{
    background:linear-gradient(120deg, var(--red-deep), var(--red));
    color:var(--white);
    padding:16px 18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .game-detail-head .gd-date{
    font-family:"OsakaEvessa","Anton",sans-serif;
    font-size:19px;
    letter-spacing:0.01em;
  }
  .game-detail-head .gd-tag{
    font-size:10.5px;
    background:rgba(255,255,255,0.18);
    border:1px solid rgba(255,255,255,0.5);
    padding:4px 9px;
    border-radius:20px;
    font-weight:700;
  }
  .gd-body{ padding:16px 18px 6px; }
  .gd-target{
    font-size:14px;
    margin:0 0 12px;
    padding-bottom:12px;
    border-bottom:1px dashed var(--line);
  }
  .gd-target b{ color:var(--red); }
  dl.gd-table{
    display:grid;
    grid-template-columns:88px 1fr;
    gap:10px 12px;
    font-size:12.5px;
    margin:0;
  }
  dl.gd-table dt{
    color:#8a7a6c;
    font-weight:700;
    letter-spacing:0.02em;
  }
  dl.gd-table dd{
    margin:0;
    color:var(--ink);
  }
  .gd-chips{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:2px;
  }
  .chip{
    font-size:11px;
    background:var(--cream);
    border:1px solid var(--gold-soft);
    color:var(--ink);
    padding:3px 9px;
    border-radius:20px;
  }
  .gd-note{
    font-size:11.5px;
    background:var(--cream);
    border-left:3px solid var(--gold);
    padding:9px 11px;
    border-radius:6px;
    margin:14px 0 16px;
    color:#5a4a3d;
  }
  .gd-actions{
    padding:0 18px 18px;
    display:flex;
    gap:10px;
  }
  .gd-actions .btn{ font-size:12.5px; padding:12px 10px; }

  .link-line{
    font-size:12px;
    color:var(--red);
    font-weight:700;
    display:inline-flex;
    align-items:center;
    gap:4px;
    border-bottom:1px solid var(--red);
    padding-bottom:1px;
  }

  /* ---------- access ---------- */
  .map-box{
    aspect-ratio:16/10;
    border-radius:14px;
    background:
      repeating-linear-gradient(0deg, rgba(30,14,7,0.05) 0 1px, transparent 1px 26px),
      repeating-linear-gradient(90deg, rgba(30,14,7,0.05) 0 1px, transparent 1px 26px),
      #eee6d8;
    position:relative;
    margin-bottom:16px;
    overflow:hidden;
    border:1px solid var(--line);
  }
  .map-pin{
    position:absolute;
    left:50%; top:46%;
    transform:translate(-50%,-100%);
    display:flex; flex-direction:column; align-items:center;
  }
  .map-pin svg{ width:34px;height:34px; fill:var(--red); filter:drop-shadow(0 4px 6px rgba(0,0,0,0.25)); }
  .map-pin span{
    background:var(--black);
    color:var(--white);
    font-size:10.5px;
    font-weight:700;
    padding:3px 8px;
    border-radius:20px;
    margin-top:2px;
  }
  .access-card{
    background:var(--cream);
    border-radius:12px;
    padding:16px;
  }
  .access-row{
    display:flex;
    gap:10px;
    font-size:12.5px;
    padding:8px 0;
    border-bottom:1px dashed var(--line);
  }
  .access-row:last-child{ border-bottom:none; }
  .access-row .a-label{
    flex:none; width:64px;
    color:#8a7a6c; font-weight:700;
  }

  /* ---------- notices ---------- */
  .notice-list{ font-size:12.5px; color:#4a3a2e; }
  .notice-list li{
    display:flex;
    gap:8px;
    padding:9px 0;
    border-bottom:1px solid var(--line);
  }
  .notice-list li:last-child{ border-bottom:none; }
  .notice-list li::before{
    content:"注";
    flex:none;
    width:20px;height:20px;
    background:var(--red);
    color:var(--white);
    font-size:10px;
    font-weight:700;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
  }

  /* ---------- footer ---------- */
  footer{
    background:var(--black);
    color:#cbbfae;
    padding:34px 20px 22px;
    text-align:center;
  }
  .footer-tagline{
    font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;
    font-weight:800;
    color:var(--white);
    font-size:16px;
    margin:0 0 4px;
  }
  .footer-tagline b{ color:var(--gold); }
  .footer-sub{ font-size:11.5px; margin:0 0 20px; color:#a89a89; }
  .footer-word{
    font-family:"OsakaEvessa","Anton",sans-serif;
    font-size:20px;
    color:var(--white);
    margin-bottom:10px;
    letter-spacing:0.02em;
  }
  .footer-copy{ font-size:10.5px; color:#8a7c6c; }

  .sec-divider{
    height:1px;
    background:linear-gradient(90deg, transparent 0%, var(--line) 20%, var(--line) 80%, transparent 100%);
  }

  @media (min-width:520px){
    .hero-title{ font-size:44px; }
  }

  /* =========================================================
     POP PASS — comic-style hard shadows, thick outlines,
     halftone texture, sticker badges. Layered on top of the
     base styles above (same class names, later wins).
     ========================================================= */

  .halftone-r::before, .halftone-g::before{
    content:"";
    position:absolute; inset:0;
    background-size:9px 9px;
    background-repeat:repeat;
    pointer-events:none;
  }
  .halftone-r::before{
    background-image:radial-gradient(circle, rgba(0,0,0,0.22) 1.3px, transparent 1.5px);
    mix-blend-mode:multiply;
  }
  .halftone-g::before{
    background-image:radial-gradient(circle, rgba(212,178,116,0.35) 1.4px, transparent 1.6px);
  }

  /* buttons: chunky pill, thick outline, hard offset shadow, tactile press */
  .btn{
    border-radius:999px !important;
    border:2.5px solid var(--black) !important;
    transition:transform .08s ease;
    font-weight:800 !important;
    position:relative;
    z-index:1;
  }
  .btn:active{ transform:translate(1px,1px); }
  .btn-primary{ background:var(--gold) !important; color:var(--black) !important; }
  .btn-red{ background:var(--red) !important; color:var(--white) !important; }
  .btn-ghost{ background:var(--black) !important; color:var(--white) !important; border-color:rgba(255,255,255,0.85) !important;  }
  .btn-outline-black{ background:var(--white) !important; }

  /* eyebrows */
  .eyebrow{
    background:var(--gold) !important;
    color:var(--black) !important;
    border:2.5px solid var(--black);
    border-radius:999px;
    display:inline-block;
    font-size:11px;
  }
  .sec-black .eyebrow{ background:var(--gold) !important; color:var(--black) !important; border-color:var(--white); }

  h2.sec-title{
    font-size:25px;
    
    letter-spacing:0.01em;
  }
  

  /* keep halftone overlays strictly behind real content (positioned ::before
     otherwise paints above non-positioned siblings) */
  .hero > *{ position:relative; z-index:1; }
  section.halftone-g::before{ opacity:0.6; }
  section.halftone-g > *{ position:relative; z-index:1; }

  /* FREE sticker badge (reused on the hero visual) */
  .ticket-free-tag{
    position:absolute;
    top:-12px; right:14px;
    width:52px; height:52px;
    border-radius:50%;
    background:var(--red);
    border:2.5px solid var(--black);
    color:var(--white);
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    font-weight:800;
    font-size:11px;
    line-height:1.15;
    z-index:2;
  }

  .chip{ border:2px solid var(--black) !important; font-weight:700; }

  /* notice list: exclamation stickers instead of plain circle */
  .notice-list li::before{
    content:"!" !important;
    border-radius:8px !important;
    border:2px solid var(--black);
    transform:rotate(-8deg);
    font-size:13px !important;
  }

  /* access map pin: bounce (respects reduced motion) */
  @media (prefers-reduced-motion: no-preference){
    .map-pin{ animation:pin-bounce 2.2s ease-in-out infinite; }
  }
  @keyframes pin-bounce{
    0%,100%{ transform:translate(-50%,-100%); }
    50%{ transform:translate(-50%,-108%); }
  }

  .footer-word{
    text-shadow:3px 3px 0 var(--red), 3px 3px 0 var(--red);
    -webkit-text-stroke:1px var(--gold);
  }

  .sec-divider{
    height:1px;
    background:linear-gradient(90deg, transparent 0%, var(--line) 20%, var(--line) 80%, transparent 100%);
  }

  /* =========================================================
     PHOTO PLACEHOLDERS — dashed slots for photos to be added later
     ========================================================= */
  .photo-slot{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    width:100%;
    background:
      repeating-linear-gradient(45deg, rgba(230,0,27,0.07) 0 11px, transparent 11px 22px),
      var(--cream);
    border:2.5px dashed rgba(30,14,7,0.35);
    border-radius:14px;
    color:#8a7a6c;
    text-align:center;
    padding:10px;
    overflow:hidden;
    box-sizing:border-box;
  }
  .photo-slot .ph-icon{ width:28px; height:28px; opacity:0.55; flex:none; }
  .photo-slot .ph-label{ font-size:11px; line-height:1.4; font-weight:700; padding:0 4px; }
  .photo-slot .ph-size{ font-size:9.5px; color:#a89a89; font-weight:500; }
  .ph-1x1{ aspect-ratio:1/1; }
  .ph-4x3{ aspect-ratio:4/3; }
  .ph-16x9{ aspect-ratio:16/9; }
  .ph-3x4{ aspect-ratio:3/4; }
  .photo-slot.round{ border-radius:50%; }
  .photo-slot.tint-red{ border-color:rgba(230,0,27,0.5); }
  .photo-slot.tint-gold{ border-color:rgba(212,178,116,0.75); }
  .photo-slot.on-dark{
    background:
      repeating-linear-gradient(45deg, rgba(212,178,116,0.12) 0 11px, transparent 11px 22px),
      rgba(255,255,255,0.05);
    color:#cbbfae;
  }
  .photo-slot.on-dark .ph-size{ color:#a89685; }
  .photo-slot.mini{ padding:4px; border-radius:10px; gap:3px; }
  .photo-slot.mini .ph-icon{ width:16px; height:16px; }
  .photo-slot.mini .ph-label{ font-size:8.5px; line-height:1.2; }
  .photo-slot.mini .ph-size{ display:none; }

  .spot-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  .spot-card{
    background:var(--white);
    border:3px solid var(--black);
    border-radius:14px;
    
    padding:10px;
  }
  .spot-card .photo-slot{ margin-bottom:9px; }
  .spot-title{ font-size:13px; margin:0 0 4px; font-weight:700; }
  .spot-body{ font-size:10.5px; color:#5a4a3d; margin:0; line-height:1.55; }

  .player-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px 16px;
  }
  .player-card{ text-align:center; }
  .player-name{ font-size:12.5px; margin:9px 0 0; font-weight:700; }
  .player-name span{ display:block; font-size:10px; color:#8a7a6c; font-weight:500; margin-top:2px; }

  .hero-mv.photo-slot{
    justify-content:flex-end;
    align-items:stretch;
    padding:22px 20px 0;
    border-radius:0;
    border:none;
    border-bottom:3px solid var(--black);
  }
  .hero-mv-text{ position:relative; z-index:2; color:var(--white); }
  .hero-mv-label{
    position:absolute; left:50%; top:36%;
    transform:translate(-50%,-50%);
    display:flex; flex-direction:column; align-items:center; gap:6px;
    width:72%;
    z-index:0;
  }
  .hero-scrim{
    position:absolute; left:0; right:0; bottom:0; height:74%;
    background:linear-gradient(180deg, transparent 0%, rgba(30,14,7,0.55) 32%, rgba(30,14,7,0.94) 72%, var(--black) 100%);
    z-index:1;
  }
  .hero-mv-text{ position:relative; z-index:2; }
  .mv-playbadge{ z-index:2; }

  /* =========================================================
     TARGET SECTION — readable stacked game cards
     (地域招待／学生・部活生／その他 をタブで切替、各試合は
      読みやすい縦積みカードで1件ずつ表示)
     ========================================================= */
  .panel-desc{
    font-size:13px;
    color:#4a3a2e;
    line-height:1.7;
    margin:0 0 16px;
    padding:12px 14px;
    background:var(--cream);
    border-radius:10px;
  }
  .panel-desc b{ color:var(--red); }

  .game-row{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:var(--shadow);
    padding:18px 16px;
    margin-bottom:14px;
  }
  .game-row.is-featured{
    background:rgba(212,178,116,0.12);
    border-color:rgba(212,178,116,0.6);
  }
  .game-row .gr-top-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:0 0 8px;
  }
  .game-row .gr-datetime-sub{
    font-size:18px;
    font-weight:700;
    color:var(--ink);
    letter-spacing:0.01em;
    margin:0;
  }
  .game-row .gr-sponsor{
    flex:none;
    display:flex;
    align-items:center;
    gap:6px;
  }
  .game-row .gr-sponsor-label{
    font-size:10.5px;
    font-weight:700;
    color:#a89a89;
    white-space:nowrap;
  }
  .game-row .gr-sponsor-logo{
    width:68px;
    height:28px;
    border-radius:6px;
    background:var(--cream);
    border:1.5px dashed rgba(30,14,7,0.32);
  }
  .game-row .gr-target-main{
    font-size:19px;
    font-weight:700;
    color:var(--black);
    line-height:1.4;
    margin:0 0 12px;
  }
  .game-row.is-featured .gr-target-main{ color:var(--red-deep); }
  .game-row .gr-target-main .gr-star{ color:var(--red); margin-right:4px; }

  .game-row .gr-matchup{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    font-size:13px;
    font-weight:700;
    color:var(--ink);
    margin:0 0 12px;
    padding-bottom:12px;
    border-bottom:1px dashed var(--line);
  }
  .game-row .gr-team{ display:inline-flex; align-items:center; gap:6px; }
  .game-row .gr-logo{
    width:26px; height:26px;
    border-radius:50%;
    flex:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .game-row .gr-logo-slot{
    background:var(--cream);
    border:1.5px dashed rgba(30,14,7,0.35);
  }
  .game-row .gr-logo-img{
    object-fit:contain;
    background:var(--white);
    border:1px solid var(--line);
    padding:2px;
  }
  .game-row .gr-vs-label{ font-size:10px; color:#a89a89; font-weight:700; }
  .game-row .gr-note{
    display:inline-block;
    font-weight:700;
    font-size:10.5px;
    color:var(--red);
    background:rgba(230,0,27,0.08);
    border-radius:6px;
    padding:2px 7px;
  }

  .game-row .gr-free-badge{
    display:inline-block;
    background:var(--red);
    color:var(--white);
    font-size:11px;
    font-weight:700;
    padding:4px 10px;
    border-radius:20px;
    margin:0 0 8px;
  }
  .game-row .gr-audience{
    font-size:13px;
    color:var(--ink);
    margin:0 0 10px;
    line-height:1.6;
  }
  .game-row .gr-capacity{
    font-size:13px;
    color:var(--ink);
    margin:0 0 10px;
    line-height:1.6;
  }
  .game-row .gr-period{
    font-size:13px;
    color:var(--ink);
    margin:0 0 14px;
    line-height:1.6;
  }
  .game-row .gr-label{
    display:inline-block;
    font-size:10.5px;
    font-weight:700;
    color:#8a7a6c;
    background:var(--cream);
    border-radius:5px;
    padding:2px 7px;
    margin-right:8px;
    white-space:nowrap;
  }
  .game-row .gr-actions{
    display:flex;
    gap:10px;
  }
  .game-row .gr-actions .btn{ font-size:13px; }

  /* ---------- quick nav (top-of-page anchor shortcuts) ---------- */
  /* ---------- step flow (申込み方法 / 当日の流れ) ---------- */
  .step-flow{ display:flex; flex-direction:column; gap:0; margin-top:14px; }
  .step-item{
    display:flex;
    gap:14px;
    padding:14px 0;
    border-bottom:1px dashed var(--line);
  }
  .step-item:last-child{ border-bottom:none; }
  .step-num{
    flex:none;
    width:38px;
    font-size:22px;
    color:var(--red);
    line-height:1.4;
  }
  .step-text{ flex:1; min-width:0; }
  .step-title{ font-size:13.5px; margin:0 0 4px; }
  .step-desc{ font-size:11.5px; color:#5a4a3d; margin:0; line-height:1.6; }

  .catch-list{ display:flex; flex-direction:column; gap:12px; }
  .catch-card{
    display:flex;
    align-items:center;
    gap:16px;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:16px;
    padding:18px;
    box-shadow:0 1px 4px rgba(30,14,7,0.06);
    cursor:pointer;
  }
  .catch-card:nth-child(1){ background:linear-gradient(135deg, rgba(230,0,27,0.09), rgba(230,0,27,0.02)); border-color:rgba(230,0,27,0.18); }
  .catch-card:nth-child(2){ background:linear-gradient(135deg, rgba(212,178,116,0.22), rgba(212,178,116,0.05)); border-color:rgba(212,178,116,0.35); }
  .catch-card:nth-child(3){ background:linear-gradient(135deg, rgba(30,14,7,0.08), rgba(30,14,7,0.02)); border-color:rgba(30,14,7,0.16); }
  .catch-card .cc-icon{
    flex:none;
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 1px 3px rgba(30,14,7,0.15);
  }
  .catch-card .cc-icon svg{ width:22px; height:22px; }
  .catch-card .cc-text{ flex:1; min-width:0; }
  .catch-card .cc-title{
    display:block;
    font-weight:700;
    font-size:14.5px;
    margin-bottom:4px;
    color:var(--ink);
  }
  .catch-card .cc-copy{
    display:block;
    font-size:11.5px;
    color:#7a6a5c;
    line-height:1.6;
  }
  .catch-card .cc-arrow{
    flex:none;
    width:18px;
    height:18px;
    color:#c4b8a8;
  }
  .catch-card .cc-arrow svg{ width:100%; height:100%; }

  .tab-panel{ display:none; }
  #tab-region:checked ~ #panel-region{ display:block; }
  #tab-student:checked ~ #panel-student{ display:block; }
  #tab-other:checked ~ #panel-other{ display:block; }

  /* top-level: 対象で探す / 試合で探す */
  .mode-switch{
    display:flex;
    border:2.5px solid var(--black);
    border-radius:12px;
    overflow:hidden;
    margin-bottom:20px;
  }
  .mode-switch label{
    flex:1;
    text-align:center;
    padding:14px 10px;
    font-weight:800;
    font-size:14px;
    cursor:pointer;
    background:var(--white);
    color:var(--black);
  }
  .mode-switch label:first-child{ border-right:2.5px solid var(--black); }
  .mode-panel{ display:none; }
  #mode-target:checked ~ #mode-panel-target{ display:block; }
  #mode-game:checked ~ #mode-panel-game{ display:block; }
  #mode-target:checked ~ .mode-switch label[for="mode-target"]{ background:var(--red); color:#fff; }
  #mode-game:checked ~ .mode-switch label[for="mode-game"]{ background:var(--red); color:#fff; }

  /* category chip shown on cards in the merged "試合で探す" view */
  .gr-cat-chip{
    flex:none;
    font-size:9.5px;
    font-weight:700;
    padding:3px 8px;
    border-radius:20px;
  }

  .entry-note{
    font-size:10.5px;
    color:#a89a89;
    margin:14px 0 0;
    text-align:center;
  }

  /* =========================================================
     PC / DESKTOP LAYER (min-width:768px)
     Mobile styles above stay as the base; this widens the
     container and reflows grids/hero for larger screens.
     ========================================================= */
  @media (min-width:768px){
    .page{ max-width:none; box-shadow:none; }
    .wrap{ max-width:1300px; margin:0 auto; }

    body{ background:var(--white); }

    section{ padding:64px 72px; }
    h2.sec-title{ font-size:32px; }
    .sec-lead{ font-size:14.5px; max-width:680px; }
    .eyebrow{ font-size:12px; }

    /* topbar */
    .topbar{ padding:16px 40px; max-width:1300px; margin:0 auto; box-sizing:border-box; }
    .logo-word{ font-size:18px; }

    /* hero */
    .hero-mv{ aspect-ratio:21/8; }
    .hero-mv-label{ top:32%; }
    .hero-mv-label .ph-label{ font-size:14px; }
    .hero-mv-text{ max-width:760px; margin:0 auto; padding:0 40px; }
    .hero-title{ font-size:64px; }
    .hero-title small{ font-size:19px; }
    .hero-sub{ font-size:15px; }
    .hero-body{ padding:32px 40px 46px; }
    .hero-copy{ font-size:15px; max-width:760px; margin:0 auto 20px; text-align:center; }
    .hero-ctas{ max-width:480px; margin:0 auto; }

    /* highlights: keep single-column on desktop too — full-bleed width per row,
       everything scaled UP rather than split into 3 (splitting made photos smaller,
       working against the "bigger/more dramatic" goal) */
    .feature-grid{ margin:32px -72px 0; }
    .feature-row{ margin-bottom:48px; }
    .feature-media .photo-slot{ aspect-ratio:21/9; }
    .feature-bignum{ font-size:150px; top:20px; left:40px; }
    .feature-ribbon{ padding:26px 40px; right:32%; bottom:32px; }
    .feature-ribbon-title{ font-size:32px; }
    .feature-ribbon-en{ font-size:14px; }
    .feature-badge{ width:68px; height:68px; top:-30px; right:34px; }
    .feature-badge svg{ width:34px; height:34px; }
    .feature-text{ max-width:900px; margin:0 auto; padding:20px 0 0; }
    .feature-body{ font-size:14px; text-align:center; }
    .spot-grid{ grid-template-columns:repeat(4,1fr); gap:18px; }
    .player-grid{ grid-template-columns:repeat(4,1fr); gap:22px; }

    /* target section: 3 category tables side by side */
    .catch-list{ flex-direction:row; }
    .catch-card{ flex-direction:column; align-items:flex-start; text-align:left; }
    .catch-card .cc-arrow{ align-self:flex-end; }
    .panel-desc{ max-width:760px; margin:0 auto 20px; }
    .game-row{ max-width:760px; margin:0 auto 14px; }

    .gd-chips{ max-width:760px; }

    /* access */
    .map-box{ max-width:640px; margin:0 auto 18px; }
    .access-card{ max-width:640px; margin:0 auto; }

    .notice-list{ max-width:680px; margin:0 auto; }

    footer{ padding:56px 40px 30px; }
  }


/* ============================================================
   応援デー 2026-27 追加分
   ============================================================ */
/* === 2026-27 見どころ実写差し替えに伴う追加分 === */
/* ============ 見どころ：写真とテキストを左右half-halfに ============ */
.feature-grid{ display:flex; flex-direction:column; gap:30px; margin:24px 0 0 !important; }
.feature-row{ display:grid; gap:16px; margin:0 !important; }
.feature-media{ position:relative; overflow:visible; }
.photo-slot.feature-photo{
  aspect-ratio:4/3 !important; padding:0; border:2px solid var(--gold-soft);
  background:var(--black) !important; overflow:hidden; display:block;
}
.photo-slot.feature-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.feature-bignum{
  position:absolute; top:10px; left:12px; font-size:56px; line-height:1;
  color:transparent; -webkit-text-stroke:2px rgba(255,255,255,0.85);
  z-index:2; pointer-events:none;
}
.feature-text{ background:transparent !important; padding:0 !important; max-width:none !important; }
.feature-en{ font-size:11.5px; font-weight:800; letter-spacing:0.16em; color:var(--gold); margin:0 0 6px; }
.feature-title{
  font-size:22px; line-height:1.4; color:var(--white); margin:0 0 10px;
  padding-bottom:10px; border-bottom:2px solid rgba(212,178,116,0.45);
}
.sec-black .feature-body{ font-size:13.5px; color:#d9cdbf; text-align:left !important; }
@media (min-width:768px){
  .feature-grid{ gap:44px; }
  .feature-row{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:38px; align-items:center; }
  .feature-row:nth-child(even) .feature-media{ order:2; }
  .feature-bignum{ font-size:82px; top:14px; left:18px; }
  .feature-en{ font-size:13px; }
  .feature-title{ font-size:30px; margin-bottom:14px; padding-bottom:14px; }
  .sec-black .feature-body{ font-size:15px; }
}
/* 対象で探す：「すべて」タブと絞り込みボタン */
#tab-all:checked ~ #panel-all{ display:block; }
.tab-filter{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.tab-filter label{
  cursor:pointer; font-size:12px; font-weight:800; padding:8px 14px;
  border:2px solid var(--black); border-radius:999px;
  background:var(--white); color:var(--black);
  display:inline-flex; align-items:center; gap:6px; line-height:1;
}
.tab-filter label span{ font-size:10.5px; font-weight:700; color:#a89a89; }
.tab-filter label .ic{ opacity:0.75; }
#tab-all:checked ~ .tab-filter label[for="tab-all"],
#tab-other:checked ~ .tab-filter label[for="tab-other"]{ background:var(--black); color:var(--white); }
#tab-all:checked ~ .tab-filter label[for="tab-all"] span,
#tab-other:checked ~ .tab-filter label[for="tab-other"] span{ color:rgba(255,255,255,0.7); }
#tab-region:checked ~ .tab-filter label[for="tab-region"]{ background:var(--red); color:var(--white); }
#tab-region:checked ~ .tab-filter label[for="tab-region"] span{ color:rgba(255,255,255,0.75); }
#tab-student:checked ~ .tab-filter label[for="tab-student"]{ background:var(--gold); color:var(--black); }
#tab-student:checked ~ .tab-filter label[for="tab-student"] span{ color:rgba(30,14,7,0.55); }
.gr-cat-chip + .gr-cat-chip{ margin-left:4px; }
/* 試合カード：日付〜対戦相手をヘッダーにまとめる */
.gr-head{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding-bottom:9px; margin-bottom:9px; border-bottom:1px dashed var(--line);
}
.gr-date{ display:flex; align-items:center; gap:8px; }
.gr-date-num{ font-size:29px; line-height:0.9; color:var(--black); }
.gr-date-meta{ display:flex; flex-direction:column; align-items:stretch; gap:3px; }
.gr-year{
  font-size:9.5px; font-weight:800; letter-spacing:0.04em; color:#8a7a6c;
  border:1.5px solid var(--line); border-radius:3px; padding:1px 4px; text-align:center; line-height:1.3;
}
.gr-dow{
  font-size:11px; font-weight:800; color:var(--white); background:var(--black);
  border-radius:3px; padding:2px 5px; text-align:center; line-height:1.25; white-space:nowrap;
}
.gr-dow.is-sun{ background:var(--red); }
.gr-dow.is-sat{ background:#1d5aa0; }
.gr-time-col{ display:flex; flex-direction:column; line-height:1.1; }
.gr-time{ font-size:18px; color:var(--black); }
.gr-tipoff{ font-size:9.5px; font-weight:800; letter-spacing:0.1em; color:#8a7a6c; }
.gr-vsblock{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-size:13.5px; font-weight:700; color:var(--ink); }
.gr-cat-chip{ display:inline-flex; align-items:center; gap:4px; }
/* 対象者：市区は個別タグで表示 */
.gr-target{ margin:0 0 9px; }
.gr-target:last-child{ margin-bottom:0; }
.gr-main{ margin-bottom:12px; }
.gr-area-list{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin:0 0 4px; }
.gr-area{
  font-size:13.5px; font-weight:700; color:var(--black); background:var(--cream);
  border:1px solid rgba(30,14,7,0.4); border-radius:999px; padding:3px 10px; line-height:1.35;
}
.gr-target-suffix{ font-size:12.5px; font-weight:700; color:#7a6a5c; margin:0; }
.gr-target-plain{ font-size:16px; font-weight:700; color:var(--black); line-height:1.4; }
/* クラブロゴを少し大きく */
.logo-mark{ width:38px; height:38px; }
.logo-mark svg{ width:23px; height:23px; }
.logo-word{ font-size:19px; }
/* 試合カード：項目を「試合情報／お申し込み」に分け、罫線で区切る */
.gr-specs{ margin:0 0 10px; }
.gr-group-title{
  font-size:10.5px; font-weight:800; letter-spacing:0.12em; color:#8a7a6c;
  margin:0 0 2px; padding-bottom:4px; border-bottom:1.5px solid var(--black);
}
.gr-spec{ display:flex; gap:10px; padding:4px 0; border-bottom:1px dotted var(--line); }
.gr-spec:last-child{ border-bottom:none; }
.gr-spec-label{ flex:none; width:60px; font-size:11px; font-weight:700; color:#8a7a6c; padding-top:2px; }
.gr-spec-value{ flex:1; min-width:0; font-size:13px; color:var(--ink); line-height:1.55; }
.gr-tilde{ color:#a89a89; margin:0 2px; }
.gr-spec-group + .gr-spec-group{ margin-top:13px; }
@media (min-width:768px){
  /* カードは1列のまま横幅いっぱいに。中身を左右に振り分けて余白を埋める */
  #tab-all:checked ~ #panel-all,
  #tab-region:checked ~ #panel-region,
  #tab-student:checked ~ #panel-student,
  #tab-other:checked ~ #panel-other,
  #mode-game:checked ~ #mode-panel-game{
    display:grid; grid-template-columns:minmax(0,1fr); gap:18px;
  }
  .tab-panel > .panel-desc, #mode-panel-game > .panel-desc{ max-width:none; margin:0; }
  .game-row{ max-width:none; margin:0; padding:18px 22px; }
  .tab-filter{ max-width:none; margin:0 0 18px; }
  .gr-head{ gap:20px; }
  .gr-head .gr-sponsor{ margin-left:auto; }
  .gr-vsblock{ padding-left:20px; border-left:1px solid var(--line); }
  .gr-date-num{ font-size:35px; }
  .gr-time{ font-size:21px; }
  .gr-vsblock{ font-size:15px; }
  .gr-body{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:26px; align-items:start; }
  .gr-main{ margin-bottom:0; }
  .gr-area{ font-size:14.5px; padding:4px 12px; }
  .gr-target-suffix{ font-size:13px; }
  .gr-target-plain{ font-size:19px; }
  .logo-mark{ width:46px; height:46px; }
  .logo-mark svg{ width:28px; height:28px; }
  .logo-word{ font-size:24px; }
  .gr-specs{ margin:0; }
  .gr-spec-group + .gr-spec-group{ margin-top:14px; }
  .gr-spec-label{ width:56px; }
  .gr-spec-value{ font-size:12.5px; }
  .gr-actions{ max-width:410px; margin-top:12px; }
  /* 申込み方法・当日の流れ：4ステップを横並びカードに */
  .step-flow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:22px; }
  .step-item{ flex-direction:column; gap:4px; padding:20px 20px 22px;
    background:var(--white); border:1px solid var(--line); border-top:3px solid var(--red);
    border-radius:12px; }
  .step-item:last-child{ border-bottom:1px solid var(--line); }
  .step-num{ width:auto; font-size:24px; line-height:1; margin-bottom:4px; }
  .step-title{ font-size:15px; }
  .step-desc{ font-size:12.5px; }
  /* 注意事項：2カラムで幅いっぱいに */
  .notice-list{ max-width:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 36px; }
  .notice-list li{ padding:13px 0; font-size:13px; }
  .notice-list li:last-child{ border-bottom:1px solid var(--line); }
  /* アクセス：外観写真は幅いっぱい、会場タブの中は地図＋案内を2列で */
  .access-photo{ aspect-ratio:32/9; }
  .venue-panel{ }
  #venue-mai:checked ~ #venue-panel-mai,
  #venue-asue:checked ~ #venue-panel-asue{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; align-items:start;
  }
  .venue-panel .map-box{ max-width:none; margin:0; }
  .venue-panel .access-card{ max-width:none; margin:0 !important; }
  .venue-switch label{ font-size:15px; padding:14px 10px; }
  .target-photo{ aspect-ratio:32/9; }
  .notice-list li{ padding:12px 0; }
}
/* ============ 募集要項は通常フォントで ============ */
.gr-specs, .gr-specs *{
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","IBM Plex Sans JP",sans-serif;
}
.gr-spec-value{ font-feature-settings:"palt"; }
/* ============ 対象のくくり（カテゴリータグ）を大きく ============ */
.gr-cat-chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:13px !important; font-weight:800; padding:5px 12px !important;
  line-height:1.3; letter-spacing:0.02em;
}
/* ============ 市区セレクター ============ */
.area-picker{ border:2px solid var(--black); background:var(--white); padding:12px 13px; margin:0 0 14px; }
.area-picker-title{ font-size:12.5px; font-weight:700; color:var(--ink); margin:0 0 9px; }
.area-picker-sub{ font-size:10.5px; font-weight:700; color:#a89a89; margin:11px 0 7px; }
.area-picker-row{ display:flex; flex-wrap:wrap; gap:5px; }
.area-btn{
  font-family:inherit; font-size:12px; font-weight:700; cursor:pointer;
  padding:5px 9px; line-height:1.25; color:var(--ink);
  background:var(--cream); border:1px solid rgba(30,14,7,0.35);
}
.area-btn:hover{ border-color:var(--black); }
.area-btn.is-active{ background:var(--red); border-color:var(--red); color:var(--white); }
.area-btn.is-all{ background:var(--white); border:1.5px solid var(--black); }
.area-btn.is-all.is-active{ background:var(--black); border-color:var(--black); color:var(--white); }
.area-picker-result{ font-size:12.5px; font-weight:700; color:var(--ink); margin:11px 0 0;
  padding-top:10px; border-top:1px dotted var(--line); }
.area-picker-result b{ color:var(--red); }
.search-empty{ font-size:13px; color:#7a6a5c; padding:20px 2px; margin:0; }
/* ============ 会場タブ（アクセス） ============ */
.venue-switch{ display:flex; border:2px solid var(--gold); margin:0 0 16px; }
.venue-switch label{
  flex:1; text-align:center; padding:12px 8px; cursor:pointer;
  font-size:13px; font-weight:800; color:var(--gold-soft); background:transparent;
  display:flex; flex-direction:column; gap:3px; line-height:1.3;
}
.venue-switch label span{ font-size:10.5px; font-weight:700; opacity:0.75; }
.venue-switch label:first-of-type{ border-right:2px solid var(--gold); }
.venue-panel{ display:none; }
#venue-mai:checked ~ .venue-switch label[for="venue-mai"],
#venue-asue:checked ~ .venue-switch label[for="venue-asue"]{ background:var(--gold); color:var(--black); }
#venue-mai:checked ~ #venue-panel-mai,
#venue-asue:checked ~ #venue-panel-asue{ display:block; }
/* ============ 注意事項 ============ */
.notice-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; margin-right:9px; vertical-align:3px;
  background:var(--red); color:var(--white); border:2px solid var(--black);
  font-size:16px; font-weight:800; line-height:1;
}
.notice-list li::before{ content:none !important; display:none !important; }
.notice-list li{ display:block; padding:11px 0; }
/* ============ 角を角張らせる（丸みを落とす） ============ */
.game-row, .catch-card, .access-card, .spot-card, .map-box, .photo-slot,
.step-item, .panel-desc, .gd-note, .mode-switch, .gr-sponsor-logo,
.btn, .chip, .eyebrow, .gr-free-badge, .gr-cat-chip, .gr-area, .gr-note,
.gr-label, .gr-spec-label, .tab-filter label, .gr-year, .gr-dow,
.hero-eyebrow, .topbar-tag, .mv-playbadge, .link-line, .map-pin span,
.gr-logo-img, .gr-logo-slot, .cc-icon, .area-btn, .venue-switch,
.notice-list li::before{
  border-radius:2px !important;
}
.photo-slot.round, .logo-mark, .ticket-free-tag{ border-radius:50% !important; }
/* ============ 対戦相手ロゴを大きく ============ */
.game-row .gr-logo{ width:46px; height:46px; }
.game-row .gr-logo-img{ padding:4px; }
/* ============ 対象の入口カード ============ */
.catch-card{
  display:flex; align-items:center; gap:14px; padding:15px 16px;
  border:2px solid var(--line); background:var(--white) !important; box-shadow:none;
}
.catch-card .cc-icon{
  width:40px; height:40px; flex:none; box-shadow:none;
  border:2px solid currentColor; background:var(--white);
  display:flex; align-items:center; justify-content:center;
}
.catch-card .cc-text{ flex:1; min-width:0; }
.catch-card .cc-title{ font-size:15px; font-weight:800; color:var(--ink); margin-bottom:3px; }
.catch-card .cc-copy{ font-size:11.5px; color:#7a6a5c; line-height:1.55; }
.catch-card .cc-count{
  flex:none; display:inline-flex; align-items:baseline; gap:3px;
  font-size:11px; font-weight:700; color:#8a7a6c;
}
.catch-card .cc-count b{ font-size:22px; line-height:1; }
.catch-card .cc-count svg{ align-self:center; margin-left:4px; color:#c4b8a8; }
.cc-region{ border-color:var(--red) !important; }
.cc-region .cc-icon, .cc-region .cc-count b{ color:var(--red); }
.cc-student{ border-color:var(--gold) !important; }
.cc-student .cc-icon, .cc-student .cc-count b{ color:#a8842f; }
.cc-other{ border-color:rgba(30,14,7,0.45) !important; }
.cc-other .cc-icon, .cc-other .cc-count b{ color:var(--black); }
@media (min-width:768px){
  .catch-card{ flex-direction:row; align-items:center; text-align:left; padding:18px 20px; }
  .catch-card .cc-title{ font-size:16px; }
  .catch-card .cc-copy{ font-size:12px; }
  .game-row .gr-logo{ width:54px; height:54px; }
  .venue-switch label{ font-size:15px; padding:14px 10px; }
  #venue-mai:checked ~ #venue-panel-mai,
  #venue-asue:checked ~ #venue-panel-asue{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; align-items:start;
  }
  .venue-panel .map-box{ max-width:none; margin:0; }
  .venue-panel .access-card{ max-width:none; margin:0 !important; }
  .access-photo{ aspect-ratio:32/9; }
  .target-photo{ aspect-ratio:32/9; }
}
/* ============ ページ内アンカーリンク ============ */
.anchor-nav{
  display:flex; gap:0; overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:var(--white); border-bottom:2px solid var(--black);
  position:sticky; top:0; z-index:40; scrollbar-width:none;
}
.anchor-nav::-webkit-scrollbar{ display:none; }
.anchor-nav a{
  flex:none; padding:12px 15px; font-size:12.5px; font-weight:800; white-space:nowrap;
  color:var(--ink); border-right:1px solid var(--line);
}
.anchor-nav a:last-child{ border-right:none; }
.anchor-nav a:hover{ background:var(--cream); }
section[id]{ scroll-margin-top:56px; }
.area-btn span{ font-size:10px; font-weight:700; margin-left:4px; opacity:0.55; }
.area-btn.is-active span{ opacity:0.8; }
@media (min-width:768px){
  .anchor-nav{ justify-content:center; }
  .anchor-nav a{ padding:14px 24px; font-size:14px; }
}
/* ============ 対象座席 ============ */
.seat-layout{ display:grid; gap:20px; margin:22px 0 20px; }
.seat-fig{ margin:0; }
.seat-media{ border:2px solid var(--black); background:var(--cream); overflow:hidden; line-height:0; }
.seat-media img{ width:100%; height:auto; display:block; }
.seat-map{ padding:14px; background:var(--white); }
.seat-map svg{ width:100%; height:auto; display:block; }
.seat-fig figcaption{
  display:flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:700; color:#7a6a5c; margin-top:8px;
}
.seat-key{ width:14px; height:14px; flex:none; background:var(--red); border:1px solid var(--black); }
.seat-notes{ font-size:12.5px; }
/* ============ 申込み方法・当日の流れを大きく ============ */
.step-item{ gap:16px; padding:16px 0; }
.step-num{ width:46px; font-size:30px; line-height:1.1; }
.step-title{ font-size:16px; margin:0 0 5px; }
.step-desc{ font-size:13px; line-height:1.7; }
@media (min-width:768px){
  .seat-layout{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:start; gap:26px; }
  .seat-fig figcaption{ font-size:12.5px; }
  .seat-notes{ max-width:none; }
  .step-flow{ gap:22px; margin-top:26px; }
  .step-item{ padding:26px 24px 28px; gap:0; }
  .step-num{ width:auto; font-size:40px; line-height:1; margin-bottom:8px; }
  .step-title{ font-size:18px; margin:0 0 6px; }
  .step-desc{ font-size:13.5px; }
}
/* ============ カテゴリーの横長ラベル＋色分けした対象ブロック ============ */
.gr-catbar{ display:flex; margin:-18px -16px 13px; }
.gr-catseg{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 10px; font-size:13px; font-weight:800; letter-spacing:0.04em;
  line-height:1.2; text-align:center;
}
.gr-catseg + .gr-catseg{ border-left:2px solid var(--white); }
.gr-target{ padding:11px 13px; border-left:4px solid transparent; margin:0 0 10px; }
.gr-target.is-region{ background:rgba(230,0,27,0.06); border-left-color:var(--red); }
.gr-target.is-student{ background:rgba(212,178,116,0.22); border-left-color:var(--gold); }
.gr-target.is-other{ background:rgba(30,14,7,0.055); border-left-color:var(--black); }
.gr-target-label{ font-size:11px; font-weight:800; margin:0 0 6px; letter-spacing:0.04em; }
.is-region .gr-target-label{ color:var(--red); }
.is-student .gr-target-label{ color:#a8842f; }
.is-other .gr-target-label{ color:var(--black); }
.gr-target .gr-area{ background:var(--white); }
.gr-target .gr-target-suffix{ color:#5a4a3d; }
@media (min-width:768px){
  .gr-catbar{ margin:-18px -22px 15px; }
  .gr-catseg{ font-size:14.5px; padding:11px 12px; }
  .gr-target{ padding:14px 16px; }
}
/* ============ 日付・協賛・申込ボタンの調整 ============ */
.gr-date-num{ font-size:32px; }
.gr-time{ font-size:19.5px; }
.gr-head .gr-sponsor{ gap:8px; }
.gr-head .gr-sponsor-label{ font-size:11px; }
.gr-head .gr-sponsor-logo{ width:86px; height:36px; }
/* 申し込みボタンをボタンらしく（厚み・押し込み） */
.gr-actions .btn{
  padding:15px 14px; font-size:14.5px;
  box-shadow:3px 3px 0 var(--black); transition:transform .08s ease, box-shadow .08s ease;
}
.gr-actions .btn-red{ padding-right:34px; }
.gr-actions .btn-red::after{
  content:""; position:absolute; right:14px; top:50%; width:8px; height:8px;
  border-top:2.5px solid currentColor; border-right:2.5px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}
.gr-actions .btn:active{ transform:translate(3px,3px); box-shadow:0 0 0 var(--black); }
@media (min-width:768px){
  .gr-date-num{ font-size:39px; }
  .gr-time{ font-size:23px; }
  .gr-head .gr-sponsor-logo{ width:110px; height:46px; }
  .gr-actions .btn{ padding:16px 16px; font-size:15px; }
  .gr-actions .btn-red{ padding-right:38px; }
  /* 入口カードはタブの上に置くだけ（リンクではない） */
  .catch-list{ margin-bottom:18px; }
}
.catch-card{ cursor:default; }
.catch-list{ margin-bottom:16px; }
/* ============ PC：左に対象、右に募集要項＋ボタン ============ */
.step-item{ position:relative; }
.step-item:not(:last-child)::after{
  content:""; position:absolute; width:11px; height:11px;
  border-top:3px solid var(--red); border-right:3px solid var(--red);
  left:50%; bottom:-7px; transform:translateX(-50%) rotate(135deg);
}
@media (min-width:768px){
  .game-row{
    display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
    column-gap:28px; align-items:start;
  }
  .gr-catbar{ grid-column:1/-1; grid-row:1; }
  .gr-eventbar{ grid-column:1/-1; grid-row:2; }
  .gr-head{ grid-column:1/-1; grid-row:3; }
  .gr-main{ grid-column:1; grid-row:4; margin:0; }
  .gr-specs{ grid-column:2; grid-row:4; }
  .gr-actions{ grid-column:2; grid-row:5; max-width:none; margin-top:16px; }
  /* 締結市のタグを目一杯大きく */
  .gr-area{ font-size:20px; padding:7px 16px; border-width:1.5px; }
  .gr-target{ padding:16px 18px; }
  .gr-target-suffix{ font-size:14.5px; margin-top:2px; }
  .gr-target-plain{ font-size:24px; }
  .gr-target-label{ font-size:12px; }
  /* 申込み方法：ステップ間に矢印 */
  .step-item:not(:last-child)::after{
    left:auto; right:-17px; bottom:auto; top:50%;
    transform:translateY(-50%) rotate(45deg);
  }
}
/* ============ 入口カード：狭い幅でも崩れないレイアウト ============ */
.catch-list{ display:grid; grid-template-columns:1fr; gap:12px; }
.catch-card{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"icon title count" "icon copy copy";
  align-items:center; column-gap:13px; row-gap:5px;
  padding:14px 16px; border:2px solid var(--line);
  background:var(--white) !important; box-shadow:none;
}
.catch-card .cc-icon{ grid-area:icon; align-self:center; }
.catch-card .cc-title{
  grid-area:title; font-size:15px; font-weight:800; color:var(--ink);
  line-height:1.45; margin:0; align-self:end;
  text-wrap:balance; word-break:auto-phrase;
}
.catch-card .cc-count{ grid-area:count; align-self:end; }
.catch-card .cc-copy{
  grid-area:copy; font-size:11.5px; color:#7a6a5c; line-height:1.55; align-self:start;
}
@media (min-width:768px){
  .catch-list{ grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:14px; }
  .catch-card{ flex-direction:row; padding:16px 18px; }
  .catch-card .cc-title{ font-size:15.5px; }
  .catch-card .cc-copy{ font-size:12px; }
}
/* ============ 絞り込みパネル（存在を分かりやすく） ============ */
.filter-head{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  background:var(--black); color:var(--white);
  border:2px solid var(--black); border-bottom:none;
  padding:11px 14px; margin:0;
}
.filter-head svg{ color:var(--gold); }
.filter-head b{ font-size:14.5px; font-weight:800; letter-spacing:0.06em; }
.filter-head span{ font-size:11.5px; font-weight:700; color:rgba(255,255,255,0.72); }
.tab-filter{
  border:2px solid var(--black); border-top:none; border-bottom:none;
  padding:13px 13px 4px; margin:0 !important; gap:6px;
}
.picker-step-label{
  display:flex; align-items:center; gap:7px; margin:0;
  border:2px solid var(--black); border-top:none; border-bottom:none;
  padding:13px 14px 0; font-size:12.5px; font-weight:800; color:var(--ink);
}
.tab-filter{ padding:9px 13px 13px; }
.area-picker{ border-top:none !important; margin-top:0 !important; }
.area-picker-title{
  display:flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:800; color:var(--ink); margin:0 0 4px;
}
.area-picker-note{ font-size:11.5px; font-weight:700; color:#8a7a6c; margin:0 0 9px; }
.picker-step{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:19px; height:19px; background:var(--red); color:var(--white);
  font-size:11.5px; font-weight:800; line-height:1;
}
.month-picker{ border-top:none !important; }
.month-picker .area-picker-title{ margin-bottom:9px; }
@media (min-width:768px){
  .filter-head b{ font-size:16px; }
  .filter-head span{ font-size:12.5px; }
  .filter-head{ padding:13px 16px; }
  .tab-filter{ padding:10px 15px 15px; }
  .picker-step-label{ padding:15px 16px 0; font-size:13.5px; }
  .area-picker-title{ font-size:13.5px; }
  .area-picker-note{ font-size:12.5px; }
}
/* ============ 日付・TIPOFF をさらに大きく ============ */
.gr-date-num{ font-size:36px; }
.gr-time{ font-size:22px; }
.gr-tipoff{ font-size:10.5px; letter-spacing:0.12em; }
.gr-year{ font-size:10.5px; padding:2px 5px; }
.gr-dow{ font-size:12px; padding:2px 6px; }
.gr-date{ gap:9px; }
@media (min-width:768px){
  .gr-date-num{ font-size:46px; }
  .gr-time{ font-size:27px; }
  .gr-tipoff{ font-size:11.5px; }
  .gr-year{ font-size:11px; }
  .gr-dow{ font-size:13px; padding:3px 7px; }
  .gr-date{ gap:11px; }
}
/* ============ 座席エリア図 ============ */
.seat-map{ padding:0 !important; background:var(--white) !important; }
.seat-map img{ width:100%; height:auto; display:block; }
.seat-key{ background:#F2E100 !important; }
@media (min-width:768px){
  .seat-layout{ grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) !important; align-items:start; }
}
/* ============ 座席エリア図：クリックで拡大 ============ */
.seatmap-zoom{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
label.seat-map{ display:block; position:relative; cursor:zoom-in; }
.seat-zoom-hint{
  position:absolute; right:8px; bottom:8px; display:inline-flex; align-items:center; gap:5px;
  background:rgba(30,14,7,0.85); color:var(--white); font-size:11.5px; font-weight:700;
  padding:5px 9px; pointer-events:none;
}
.seat-zoom-hint svg{ width:14px; height:14px; flex:none; }
.seat-zoom-hint .is-close{ display:none; }
.seatmap-zoom:checked + label.seat-map{
  position:fixed; inset:0; z-index:200; margin:0; border:none;
  background:rgba(30,14,7,0.94) !important; cursor:zoom-out;
  display:flex; align-items:center; justify-content:center; padding:14px;
}
.seatmap-zoom:checked + label.seat-map img{
  width:auto; max-width:100%; max-height:100%; object-fit:contain;
}
.seatmap-zoom:checked + label.seat-map .seat-zoom-hint{ right:14px; bottom:14px; }
.seatmap-zoom:checked + label.seat-map .is-open{ display:none; }
.seatmap-zoom:checked + label.seat-map .is-close{ display:inline; }
/* ============ 曜日バッジ：クラブ規定の曜日カラー ============ */
.gr-dow{ color:var(--white); background:var(--black); }
.gr-dow.is-mon{ background:#BD4D90; }
.gr-dow.is-tue{ background:#E69C37; }
.gr-dow.is-wed{ background:#52A5DC; }
.gr-dow.is-thu{ background:#418F45; }
.gr-dow.is-fri{ background:#C3A26B; }
.gr-dow.is-sat{ background:#182B84; }
.gr-dow.is-sun{ background:#BA3129; }
/* ============ 黒基調のUIを赤基調へ ============ */
.filter-head{ background:var(--red); border-color:var(--red); }
.filter-head svg{ color:var(--white); }
.filter-head span{ color:rgba(255,255,255,0.85); }
.tab-filter{ border-color:var(--red); }
.area-picker{ border-color:var(--red) !important; }
.mode-switch{ border-color:var(--red) !important; }
.mode-switch label:first-child{ border-right-color:var(--red) !important; }
.tab-filter label{ border-color:var(--red); }
.area-btn{ border-color:rgba(230,0,27,0.4); }
.area-btn:hover{ border-color:var(--red); }
.area-btn.is-all{ border-color:var(--red); }
.area-btn.is-all.is-active{ background:var(--red-deep); border-color:var(--red-deep); }
#tab-all:checked ~ .tab-filter label[for="tab-all"]{ background:var(--red-deep); border-color:var(--red-deep); }
.picker-step{ background:var(--red-deep); }
/* ============ 対象座席：見出しと短いリード ============ */
.seat-lead{ font-size:20px; font-weight:800; color:var(--ink); margin:0 0 4px; }
.seat-lead-note{ font-size:12.5px; font-weight:700; color:#7a6a5c; margin:0 0 4px; }
.seat-label{
  display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:800; color:var(--ink); margin:0 0 9px;
  padding-bottom:8px; border-bottom:2px solid var(--red);
}
.seat-label::before{ content:""; width:9px; height:9px; background:var(--red); flex:none; }
@media (min-width:768px){
  .seat-lead{ font-size:26px; }
  .seat-lead-note{ font-size:13.5px; }
  .seat-label{ font-size:16px; }
}
/* ============ 注意事項・アクセス：数字と英字を通常フォントに ============ */
.notice-list, .notice-list *,
#access .access-card, #access .access-card *,
#access .sec-lead, #access .venue-switch label, #access .venue-switch label span,
#access .link-line, #access .map-pin span{
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","IBM Plex Sans JP",sans-serif;
}
.a-soon{ font-weight:700; color:#8a7a6c; }
/* ============ アクセス：赤ベースに ============ */
#access{ background:var(--red) !important; }
#access.halftone-g::before{ opacity:0.35; }
#access .sec-title{ color:var(--white) !important; }
#access .sec-lead{ color:rgba(255,255,255,0.92); }
#access .sec-lead b{ color:var(--white); }
#access .eyebrow{ background:var(--white) !important; color:var(--red) !important; border-color:var(--white); }
#access .venue-switch{ border-color:var(--white); }
#access .venue-switch label{ color:rgba(255,255,255,0.85); }
#access .venue-switch label:first-of-type{ border-right-color:var(--white); }
#venue-mai:checked ~ .venue-switch label[for="venue-mai"],
#venue-asue:checked ~ .venue-switch label[for="venue-asue"]{
  background:var(--white) !important; color:var(--red) !important;
}
#access .link-line{ color:var(--white) !important; border-color:var(--white) !important; }
#access .photo-slot.on-dark{ border-color:rgba(255,255,255,0.7); color:rgba(255,255,255,0.85); }
#access .photo-slot.on-dark .ph-size{ color:rgba(255,255,255,0.6); }
/* ============ 見どころ：写真を外側へはみ出させる ============ */
.feature-media{ overflow:visible; }
.feature-row:nth-child(odd) .feature-media{ margin-left:-20px; }
.feature-row:nth-child(even) .feature-media{ margin-right:-20px; }
.photo-slot.feature-photo{ border-width:0; box-shadow:0 6px 24px rgba(0,0,0,0.35); }
@media (min-width:768px){
  .feature-row:nth-child(odd) .feature-media{ margin-left:-72px; }
  .feature-row:nth-child(even) .feature-media{ margin-right:-72px; }
  .feature-row{ gap:44px; }
}
/* ============ 文字の強弱・色味を足す ============ */
h2.sec-title{ display:flex; align-items:flex-start; gap:11px; }
h2.sec-title::before{
  content:""; flex:none; width:7px; align-self:stretch; background:var(--red);
  margin-top:4px; margin-bottom:6px;
}
.sec-black h2.sec-title::before{ background:var(--gold); }
#access h2.sec-title::before{ background:var(--white); }
.sec-lead{ color:#3d2f24; }
.gr-group-title{ color:var(--red); border-bottom-color:var(--red); letter-spacing:0.14em; }
.gr-spec-label{ color:#6b5b4d; }
.gr-spec-value{ color:var(--black); }
.gr-cap{ font-size:15.5px; font-weight:800; color:var(--red); }
.gr-target-suffix{ color:#5a4a3d; }
.panel-desc{ border-left:4px solid var(--gold); }
@media (min-width:768px){
  .gr-cap{ font-size:17px; }
  h2.sec-title::before{ width:9px; }
}
/* ============ 抽選タグ・入口カード（試合数なし） ============ */
.gr-lottery{
  display:inline-block; margin-left:7px; padding:2px 7px;
  font-size:10.5px; font-weight:800; letter-spacing:0.04em;
  color:var(--red); border:1.5px solid var(--red); line-height:1.3;
}
.catch-card{ grid-template-columns:auto minmax(0,1fr); grid-template-areas:"icon title" "icon copy"; }
@media (min-width:768px){ .gr-lottery{ font-size:11px; } }
/* ============ 対象条件（在住・在学・在勤）の表記 ============ */
.gr-cond-row{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:8px; }
.gr-cond{
  font-size:11.5px; font-weight:800; letter-spacing:0.04em; line-height:1.35;
  color:var(--red); background:var(--white); border:1.5px solid var(--red); padding:2px 9px;
}
.is-student .gr-cond{ color:#a8842f; border-color:var(--gold); }
.is-other .gr-cond{ color:var(--black); border-color:var(--black); }
.gr-cond-note{ font-size:12px; font-weight:700; color:#5a4a3d; margin-left:3px; }
.gr-target-suffix{ margin-top:8px; }
@media (min-width:768px){
  .gr-cond{ font-size:12.5px; padding:3px 10px; }
  .gr-cond-note{ font-size:13px; }
}
/* ============ ヘッダーのSNSリンク ============ */
.topbar{ gap:12px; }
.sns-links{ display:flex; align-items:center; gap:12px; margin-left:auto; }
.sns-links a{
  display:inline-flex; width:21px; height:21px; color:var(--black);
  transition:color .12s ease;
}
.sns-links a:hover{ color:var(--red); }
.sns-links svg{ width:100%; height:100%; }
@media (max-width:479px){
  .sns-links{ gap:10px; }
  .sns-links a{ width:19px; height:19px; }
  .topbar-tag{ display:none; }
}
@media (min-width:768px){
  .sns-links{ gap:16px; margin-left:auto; margin-right:6px; }
  .sns-links a{ width:24px; height:24px; }
}
/* ============ 条件行・カード外枠・ボタン・TIPOFF ============ */
.gr-cond-row{
  margin-top:10px; padding-top:9px; border-top:1px solid rgba(30,14,7,0.16);
}
.gr-cond-lead{ font-size:12px; font-weight:800; color:#5a4a3d; margin-right:3px; }
/* TIPOFF を時刻と中央揃えに */
.gr-time-col{ align-items:center; text-align:center; }
/* カードの外枠をカテゴリー色に */
.game-row{ border-width:2px; }
.game-row.cat-region{ border-color:var(--red); }
.game-row.cat-student{ border-color:var(--gold); }
.game-row.cat-other{ border-color:var(--black); }
/* ボタン：影をなくす */
.gr-actions .btn{ box-shadow:none; }
.gr-actions .btn:active{ transform:translate(1px,1px); box-shadow:none; }
.gr-actions .btn-outline-black{ background:var(--cream); }
.gr-actions .btn-outline-black:hover{ background:var(--black); color:var(--white); }
.gr-actions .btn-red:hover{ background:var(--red-deep); }
/* 欧文を通常フォントで */
.lat{ font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","IBM Plex Sans JP",sans-serif; }
/* フッターのSNS */
footer .sns-links{ justify-content:center; margin:0 auto 16px; gap:18px; }
footer .sns-links a{ color:#cbbfae; width:24px; height:24px; }
footer .sns-links a:hover{ color:var(--gold); }
@media (min-width:768px){ footer .sns-links{ gap:22px; } footer .sns-links a{ width:26px; height:26px; } }
/* ============ ヒーロー：メインビジュアル画像1枚 ============ */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.hero-mv{
  position:relative; aspect-ratio:auto; height:auto; padding:0;
  border:none; border-radius:0; overflow:hidden;
  background:#CA1522;
  display:flex; flex-direction:row; align-items:flex-start; justify-content:center;
}
.hero-mv::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--pattern-light); background-repeat:repeat;
  background-size:360px auto; opacity:0.08;
}
.hero-mv-img{
  position:relative; z-index:1;
  display:block; width:100%; max-width:100%; height:auto;
}
@media (min-width:1500px){ .hero-mv-img{ max-width:1500px; } }
/* CTA・スクロールはキービジュアルの下へ */
.hero-body{
  background:var(--black); padding:26px 20px 30px;
}
.hero-body .hero-ctas{
  display:flex; flex-direction:column; align-items:center; gap:0;
}
.mv-check{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 30px; background:var(--gold); color:var(--black);
  font-size:15px; font-weight:900; letter-spacing:0.06em;
  border:2px solid var(--black); text-decoration:none;
}
.mv-check svg{ width:15px; height:15px; flex:none; }
.mv-check:hover{ background:var(--white); }
.mv-check:active{ transform:translate(1px,1px); }
/* 下へ促すギミック：細いレールを光の粒が流れ落ちる */
.mv-scroll{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  margin-top:18px; text-decoration:none; color:rgba(255,255,255,0.8);
}
.mv-scroll-en{
  font-size:9.5px; font-weight:800; letter-spacing:0.32em; text-indent:0.32em;
}
.mv-scroll-rail{
  position:relative; display:block; width:1px; height:38px;
  background:rgba(255,255,255,0.28); overflow:hidden;
}
.mv-scroll-rail i{
  position:absolute; left:-1px; top:0; width:3px; height:12px;
  background:var(--gold); box-shadow:0 0 8px rgba(212,178,116,0.9);
  animation:mvScroll 1.8s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes mvScroll{
  0%{ transform:translateY(-14px); opacity:0; }
  22%{ opacity:1; }
  78%{ opacity:1; }
  100%{ transform:translateY(38px); opacity:0; }
}
.mv-scroll:hover .mv-scroll-rail{ background:rgba(255,255,255,0.5); }
@media (prefers-reduced-motion:reduce){
  .mv-scroll-rail i{ animation:none; top:auto; bottom:0; opacity:1; }
}
@media (min-width:768px){
  .hero-body{ padding:38px 40px 44px; }
  .mv-check{ font-size:18px; padding:19px 52px; }
  .mv-check svg{ width:17px; height:17px; }
  .mv-scroll{ margin-top:20px; }
  .mv-scroll-rail{ height:46px; }
  @keyframes mvScroll{ 0%{ transform:translateY(-14px); opacity:0; }
    22%{ opacity:1; } 78%{ opacity:1; }
    100%{ transform:translateY(46px); opacity:0; } }
}
@media (min-width:768px){ .hero-body{ padding-top:30px; } }
/* ============ Googleマップ埋め込み ============ */
.map-box{ background:#eee6d8; border:2px solid var(--white); }
.map-box iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.map-link{ color:var(--red); font-weight:800; border-bottom:1px solid var(--red); padding-bottom:1px; }
.map-link:hover{ color:var(--red-deep); border-color:var(--red-deep); }
/* ============ ハンバーガーメニュー ============ */
.nav-toggle{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.nav-burger{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:36px; padding:0 8px; flex:none; cursor:pointer;
  border:2px solid var(--red); background:var(--white); margin-left:10px;
}
.nav-burger span{ display:block; height:2.5px; background:var(--red); border-radius:1px; }
.nav-drawer{
  position:fixed; inset:0; z-index:150; display:none;
  background:var(--black); padding:86px 22px 40px;
  overflow-y:auto;
}
.nav-toggle:checked ~ .nav-drawer{ display:block; }
.nav-close{
  position:absolute; top:20px; right:18px; cursor:pointer;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  color:var(--white); font-size:20px; font-weight:800;
  border:2px solid rgba(255,255,255,0.5);
}
.nav-drawer-list{ display:flex; flex-direction:column; max-width:520px; margin:0 auto; }
.nav-drawer-list a{
  display:flex; align-items:center; justify-content:space-between;
  color:var(--white); font-size:18px; font-weight:800; padding:17px 4px;
  border-bottom:1px solid rgba(255,255,255,0.18);
}
.nav-drawer-list a::after{ content:"›"; color:var(--gold); font-size:22px; }
.nav-drawer-list a:active{ color:var(--gold); }
/* スマホはヘッダーを固定してハンバーガーを常時表示、アンカーバーは隠す */
@media (max-width:767px){
  .sample-badge{ position:static; }
  .topbar{ position:sticky; top:0; z-index:45; }
  .anchor-nav{ display:none; }
}
@media (min-width:768px){
  .nav-burger{ display:none; }
  .nav-toggle:checked ~ .nav-drawer{ display:none; }
}
/* ============ トーン調整：ポップ寄り → スタイリッシュとの中間 ============ */
/* 1) 太い黒フチを細く */
.btn, .chip, .gr-free-badge, .gr-cat-chip, .gr-area, .tab-filter label,
.catch-card .cc-icon, .mode-switch, .area-picker, .filter-head,
.nav-burger, .venue-switch, .seat-media, .notice-mark, .ticket-free-tag,
.gr-logo-img, .gr-logo-slot, .gr-cond, .step-item{
  border-width:1.5px !important;
}
.game-row, .catch-card{ border-width:1.5px; }
.mode-switch label:first-child{ border-right-width:1.5px !important; }
.venue-switch label:first-of-type{ border-right-width:1.5px !important; }
.nav-burger span{ height:2px; }
/* 2) ハーフトーンの網点を控えめに */
.halftone-r::before{ opacity:0.4; }
section.halftone-g::before{ opacity:0.2 !important; }
#access.halftone-g::before{ opacity:0.16; }
/* 3) 見出しまわりを軽く */
.eyebrow{
  background:transparent !important; color:var(--red) !important;
  border:1.5px solid var(--red); font-weight:700; letter-spacing:0.2em;
}
.sec-black .eyebrow{ color:var(--gold) !important; border-color:rgba(212,178,116,0.65); }
#access .eyebrow{ color:var(--white) !important; border-color:rgba(255,255,255,0.75); }
h2.sec-title{ letter-spacing:0.02em; gap:12px; }
h2.sec-title::before{ width:4px !important; }
@media (min-width:768px){ h2.sec-title::before{ width:5px !important; } }
/* 4) 本文の太さを一段落として抑揚をつける */
.sec-lead, .step-desc, .cc-copy, .seat-lead-note, .spot-body,
.sec-black .feature-body, .feature-body, .notice-list li{ font-weight:500; }
.gr-spec-value{ font-weight:600; }
/* 5) フッターロゴの装飾を外す */
.footer-word{
  text-shadow:none !important; -webkit-text-stroke:0 !important;
  color:var(--white); letter-spacing:0.1em;
}
/* 6) 欧文の字間を広げて締める */
.feature-en, .gr-tipoff, .gr-group-title, .topbar-tag, .filter-head b{ letter-spacing:0.16em; }
.logo-word, .logo-word b{ letter-spacing:0.04em; color:var(--red); }
/* ============ クラブパターンを背景にうっすら ============ */
:root{
  --pattern-light:url("/files/user/_/lp/2026-27/hometown/img/pattern_light.png");
  --pattern-dark:url("/files/user/_/lp/2026-27/hometown/img/pattern_dark.png");
}
.hero-body, .sec-black, #access, footer, .sec-cream{ position:relative; }
.hero-body::after, .sec-black::after, #access::after, footer::after, .sec-cream::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:var(--pattern-light); background-repeat:repeat;
  background-size:300px auto;
}
@media (min-width:768px){
  .hero-body::after, .sec-black::after, #access::after, footer::after, .sec-cream::after{ background-size:440px auto; }
}
.hero-body::after{ opacity:0.05; }
.sec-black::after{ opacity:0.06; }
#access::after{ opacity:0.06; }
footer::after{ opacity:0.04; }
.sec-cream::after{ background-image:var(--pattern-dark); opacity:0.035; }
/* 中身は必ず柄より前面に */
.hero-body > *, .sec-black > *, #access > *, footer > *, .sec-cream > *{ position:relative; z-index:1; }
/* もとのハーフトーンは柄と重なるので抑える */
.halftone-r::before{ opacity:0.2; }
section.halftone-g::before{ opacity:0.1 !important; }
/* ============ 読みづらい文字のコントラストを上げる ============ */
.photo-slot .ph-label{ color:#6b5b4d; }
.photo-slot .ph-size{ color:#8a7a6c; }
.photo-slot.on-dark, .photo-slot.on-dark .ph-label{ color:rgba(255,255,255,0.92); }
.photo-slot.on-dark .ph-size{ color:rgba(255,255,255,0.72); }
/* ヒーローMVの仮置き背景はクリーム地なので文字は濃色で */
.hero-mv-label .ph-label{ color:#4a3a2e; text-shadow:0 1px 0 rgba(255,255,255,0.6); }
.hero-mv-label .ph-size{ color:#7a6a5c; text-shadow:0 1px 0 rgba(255,255,255,0.6); }
.hero-mv-label .ph-icon{ color:#6b5b4d; opacity:0.85; }
#access .photo-slot.on-dark{ border-color:rgba(255,255,255,0.85); }
.area-picker-sub{ color:#7a6a5c; }
.gr-sponsor-label{ color:#7a6a5c; }
.gr-tipoff{ color:#6b5b4d; }
.gr-spec-label{ color:#5f5044; }
.footer-copy{ color:#a99b8a; }
.player-name span{ color:#6b5b4d; }
.gr-vs-label{ color:#7a6a5c; }
.area-btn{ color:var(--black); }
.catch-card .cc-copy{ color:#6b5b4d; }
.seat-fig figcaption{ color:#6b5b4d; }
/* eyebrow：背景色が残って文字と同色になっていたので地を抜く */
.sec-black .eyebrow, #access .eyebrow, .sec-cream .eyebrow{ background:transparent !important; }
#access .photo-slot.on-dark .ph-label{ color:#fff; text-shadow:0 1px 4px rgba(0,0,0,0.35); }
#access .photo-slot.on-dark .ph-size{ color:rgba(255,255,255,0.85); text-shadow:0 1px 4px rgba(0,0,0,0.35); }
#access .photo-slot.on-dark .ph-icon{ color:#fff; opacity:0.95; }
/* 薄すぎたグレー文字（詳細度が足りず効いていなかった分） */
.game-row .gr-vs-label, .game-row .gr-sponsor-label{ color:#7a6a5c; }
.gr-tilde{ color:#7a6a5c; }
.entry-note{ color:#6f6154;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","IBM Plex Sans JP",sans-serif; }
.area-picker-note{ color:#6f6154; }
.gr-year{ color:#7a6a5c; }
.is-student .gr-target-label{ color:#8a6a1e; }
/* 曜日バッジ：明るい地の日は文字を濃色にして視認性を確保 */
.gr-dow.is-tue, .gr-dow.is-wed, .gr-dow.is-fri{ color:var(--black); }
/* 赤地の上の白文字を少し強く */
#access .sec-lead{ color:rgba(255,255,255,0.97); }
#access .venue-switch label{ color:rgba(255,255,255,0.95); }
.filter-head span{ color:rgba(255,255,255,0.95); }
.access-row .a-label, .a-label, .a-soon{ color:#6f6154; }
/* ============ 協賛枠：決定前はグレーアウト ============ */
.gr-sponsor-label{ color:#9a9186 !important; }
.gr-sponsor-logo, .game-row .gr-sponsor-logo, .gr-head .gr-sponsor-logo{
  background:#e2ddd6; border:1.5px dashed #b9b1a6;
}
/* ============ 申込みボタン：受付前はグレーアウト ============ */
.btn.is-disabled{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:#d7d0c6 !important; color:#736a5e !important; border-color:#c6bdb1 !important;
  cursor:not-allowed; pointer-events:none; box-shadow:none;
}
.btn.is-disabled small{ font-size:9.5px; font-weight:700; letter-spacing:0; opacity:0.9; }
.btn.is-disabled::after{ content:none !important; }
/* ============ 企画名バー（小児がんゴールドリボンデー等） ============ */
.gr-eventbar{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin:-13px -16px 13px; padding:6px 12px;
  font-size:11.5px; font-weight:800; letter-spacing:0.04em;
  background:#fdf6e6; color:#7a5c12; border-bottom:1px solid rgba(212,178,116,0.7);
}
@media (min-width:768px){
  .gr-eventbar{ margin:-15px -22px 15px; font-size:12.5px; padding:7px 14px; }
}
.photo-slot .ph-size{ color:#6f6154; }
/* ============ ヒーロー下〜見どころをキービジュアルの赤に合わせる ============ */
:root{ --kv-red:#CA1522; }
.hero-mv{ background:var(--kv-red); }
.hero-body{ background:var(--kv-red); }
.hero-body::after{ opacity:0.07; }
.sec-black#about{ background:var(--kv-red); }
#about::after{ opacity:0.07; }
#about .eyebrow{ color:var(--white) !important; border-color:rgba(255,255,255,0.8); }
#about .sec-title{ color:var(--white); }
#about .sec-title::before{ background:var(--white) !important; }
#about .feature-en{ color:#FFE6A8; }
#about .feature-title{ color:var(--white); border-color:rgba(255,255,255,0.45); }
#about .sec-black .feature-body, #about .feature-body{ color:rgba(255,255,255,0.94); }
#about .photo-slot.feature-photo{ border-color:rgba(255,255,255,0.55); }
#about .feature-bignum{ -webkit-text-stroke-color:rgba(255,255,255,0.9); }
/* ============ フッター：赤ベース ============ */
footer{ background:var(--red); color:rgba(255,255,255,0.92); }
footer::after{ opacity:0.07; }
.footer-word{ color:var(--white); }
.footer-copy{ color:rgba(255,255,255,0.9); }
footer .sns-links a{ color:rgba(255,255,255,0.9); }
footer .sns-links a:hover{ color:var(--gold); }