
:root{
  --ink:#111; --paper:#d7d5d1; --line:rgba(17,17,17,.38); --white:#fff;
  --max:1320px; --pad:48px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:"LINE Seed JP","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;background:url("../img/seamlessBg.webp") repeat;background-size:512px}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{max-width:100%;display:block}
body.page-home{color:#fff;position:relative}
body.page-home::before{content:"";position:fixed;inset:0;background:rgba(20,16,16,.72);z-index:-1;pointer-events:none}
.site-header{height:118px;display:flex;align-items:center;gap:56px;padding:0 max(var(--pad),calc((100vw - var(--max))/2));position:relative;z-index:20}
.brand{width:180px;flex:none}.brand img{width:100%;filter:none}
.page-home .brand img,.page-home .footer-logo{filter:invert(1)}
.global-nav{display:flex;gap:26px;margin-left:auto;font-size:14px;font-weight:700}
.global-nav a{white-space:nowrap}
.menu-btn{display:none}

.language-switch{display:flex;gap:10px;margin-left:18px;font-size:15px;line-height:1}
.language-switch a{opacity:.58;border-bottom:1px solid transparent;padding:3px 0}
.language-switch a.active{opacity:1;border-bottom-color:currentColor}
.sns a{display:grid;place-items:center;width:34px;height:34px}
.sns img{width:100%;height:100%;object-fit:contain}
.page-home .sns img{filter:invert(1)}
.to-top{width:64px;height:64px;display:block}
.to-top img{width:100%;height:100%}
.page-home .to-top img{filter:invert(1)}
.month-arrow{width:42px;height:42px;display:grid;place-items:center}
.month-arrow img{width:28px;height:28px}
.month-arrow.prev img{transform:rotate(-90deg)}
.month-arrow.next img{transform:rotate(90deg)}
.news-more{display:inline-flex;align-items:center;gap:6px}
.news-more img{width:14px;height:14px;filter:invert(1)}

.section-shell{width:min(var(--max),calc(100% - var(--pad)*2));margin-inline:auto}
h1,h2{text-align:center;letter-spacing:.01em}
h2{font-size:34px;margin:60px 0 28px}
.site-footer{width:min(var(--max),calc(100% - var(--pad)*2));margin:100px auto 0;min-height:220px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px}
.footer-logo{width:170px}.sns{display:flex;gap:28px;font-weight:800;font-size:22px}.to-top{position:absolute;right:0;bottom:28px}

/* TOP */
.top-events{padding-top:70px}.event-strip{display:grid;grid-template-columns:repeat(4,1fr)}
.event-tile{border:1px solid rgba(255,255,255,.55);aspect-ratio:1.05/1;position:relative;padding:24px;display:flex;align-items:flex-end}
.event-tile .type{position:absolute;top:-1px;right:-1px;background:#fff;color:#111;font-size:11px;padding:5px 34px}
.event-tile .date{font-size:25px;font-weight:800}
.event-tile .date small{font-size:.68em}.news-box{border:1px solid rgba(255,255,255,.6);padding:12px 24px}
.news-box a{display:grid;grid-template-columns:110px 145px 1fr;align-items:center;gap:16px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.35);font-size:13px}
.news-box a:last-child{border-bottom:0}.thumb{height:32px;border:1px solid rgba(255,255,255,.6)}
.movie{margin-top:42px}.movie-box{background:#1f1010;aspect-ratio:16/7;display:grid;place-items:center}.movie-box button{border:0;background:transparent;color:#fff;font-size:68px}
.member-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.member-card{border:1px solid currentColor;min-height:170px;padding:26px;display:flex;flex-direction:column;justify-content:space-between;font-size:16px}.member-card strong{font-size:25px}.member-card span{font-size:12px;align-self:flex-end}.women{grid-column:1/-1}
.access{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:52px;margin-top:150px}.map-placeholder{aspect-ratio:1/1;border:1px solid currentColor;display:grid;place-items:center;font-size:36px;font-weight:800}.address h3{font-size:26px;font-weight:400;margin:0 0 24px}.address p{margin:7px 0}

/* CALENDAR */
.calendar-main{padding-top:40px}.calendar-main h1{font-size:44px;margin:0 0 28px}.calendar-head{display:flex;align-items:center;justify-content:center;gap:42px;font-size:42px;font-weight:800}.calendar-head button{border:0;background:transparent;font-size:42px}.filter-tabs{width:520px;max-width:100%;display:grid;grid-template-columns:repeat(3,1fr);margin:32px auto 48px}.filter-tabs button{border:1px solid #111;background:rgba(255,255,255,.2);padding:7px;font-size:27px}.filter-tabs .active{background:#111;color:#fff}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line)}
.calendar-cell,.weekday{min-width:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.weekday{padding:10px;text-align:center;font-weight:700;background:rgba(255,255,255,.35)}
.calendar-cell{aspect-ratio:1/1.14;background:rgba(255,255,255,.82);padding:9px;position:relative}.calendar-cell.muted{opacity:.38}.day-num{font-weight:700}
.cell-event{display:block;margin-top:8px;padding:5px 6px;background:#111;color:#fff;font-size:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cell-event.live{background:#444}
.compact{margin-top:150px}

/* EVENT */
.page-event #eventDetail{min-height:1400px}.event-hero{height:650px;background:#e80012 center/cover no-repeat;position:relative}.event-hero img{width:100%;height:100%;object-fit:cover}.event-date-badge{position:absolute;right:6%;bottom:-24px;font-size:78px;line-height:.75}.event-date-badge small{display:block;font-size:16px;writing-mode:vertical-rl;position:absolute;left:-22px;bottom:0}
.event-content{width:min(1180px,calc(100% - var(--pad)*2));margin:42px auto}.event-title{text-align:center;font-size:42px;font-weight:400;margin:0;border-bottom:1px solid var(--line);padding-bottom:8px}.event-times{display:flex;justify-content:center;gap:18px;margin:16px 0 50px}.event-times span{border:1px solid var(--line);padding:6px 12px}
.detail-row{display:grid;grid-template-columns:160px 1fr;gap:20px;margin:34px 0}.detail-row>h3{font-size:28px;font-weight:400;margin:0}.lineup-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.lineup-card{aspect-ratio:1/1;border:1px solid var(--line);display:grid;place-items:center;padding:8px;text-align:center}
.price-table{border:1px solid var(--line)}.price-line{display:grid;grid-template-columns:140px 1fr 1fr;border-bottom:1px solid var(--line);font-size:22px}.price-line:last-child{border-bottom:0}.price-line span{padding:14px 18px;border-right:1px solid var(--line)}.price-line span:last-child{border-right:0}
.attention{text-align:center;margin:70px auto 0;max-width:900px}.attention h3{font-size:26px;font-weight:400}.attention p{font-size:18px;font-weight:700}

@media(max-width:900px){
  :root{--pad:20px}
  .site-header{height:86px;padding:0 var(--pad)}.brand{width:126px}
  .menu-btn{display:block;margin-left:auto;border:0;background:transparent;width:38px;height:38px;position:relative}
  .menu-btn span{position:absolute;left:4px;right:4px;height:2px;background:currentColor;top:14px}.menu-btn span+span{top:24px}
  .global-nav{display:none;position:absolute;left:0;right:0;top:86px;background:rgba(20,20,20,.96);color:#fff;padding:24px var(--pad);grid-template-columns:1fr 1fr;gap:18px}
  .site-header.open .global-nav{display:grid}

  .language-switch{position:absolute;right:70px;top:35px;gap:8px;font-size:12px}
  .site-header.open .language-switch{color:inherit}
  .sns{gap:20px}

  .page-calendar .global-nav,.page-event .global-nav{background:rgba(240,240,240,.98);color:#111}
  h2{font-size:27px}
  .top-events{padding-top:20px}.event-strip{grid-template-columns:1fr 1fr}.event-tile{aspect-ratio:1/1.05;padding:14px}.event-tile .type{padding-inline:18px}.event-tile .date{font-size:18px}
  .news-box a{grid-template-columns:72px 100px 1fr;font-size:10px;gap:8px}.movie-box{aspect-ratio:16/9}
  .member-grid{grid-template-columns:1fr}.women{grid-column:auto}.member-card{min-height:125px}.member-card strong{font-size:20px}
  .access{grid-template-columns:1fr;margin-top:90px}.address{text-align:center}
  .site-footer{margin-top:80px;min-height:180px}.to-top{width:50px;height:50px}

  .calendar-main{padding-top:20px}.calendar-main h1{font-size:33px}.calendar-head{font-size:31px;gap:24px}.calendar-head button{font-size:30px}.filter-tabs{margin-bottom:28px}.filter-tabs button{font-size:20px}
  .week-head{display:none}.calendar-grid{grid-template-columns:1fr;border:0;gap:8px}.calendar-cell{aspect-ratio:auto;min-height:92px;border:1px solid var(--line);padding:12px}.calendar-cell:before{content:attr(data-week);font-size:11px;margin-left:8px;color:#666}.calendar-cell.muted{display:none}
  .cell-event{font-size:12px;padding:7px 8px}
  .compact{margin-top:90px}

  .event-hero{height:300px}.event-date-badge{font-size:52px;right:7%;bottom:-12px}.event-content{margin-top:34px}.event-title{font-size:28px}.event-times{margin-bottom:34px}.detail-row{grid-template-columns:1fr;gap:12px}.detail-row>h3{font-size:22px}.lineup-grid{grid-template-columns:repeat(3,1fr);gap:10px}.price-line{grid-template-columns:80px 1fr;font-size:14px}.price-line span:nth-child(3){display:none}.attention p{font-size:14px;line-height:1.8}
}



/* SP full-screen menu — smoother TOBE-inspired motion */
.sp-menu{display:none}

@media(max-width:900px){
  body.menu-open{overflow:hidden}

  .site-header{
    position:relative;
    z-index:120;
  }

  .menu-btn{
    z-index:140;
    -webkit-tap-highlight-color:transparent;
  }

  .menu-btn span{
    will-change:transform,top,background-color;
    transition:
      transform .55s cubic-bezier(.77,0,.18,1),
      top .55s cubic-bezier(.77,0,.18,1),
      background-color .35s ease;
  }

  .site-header.open .menu-btn span:first-child{
    top:19px;
    transform:rotate(45deg);
  }

  .site-header.open .menu-btn span:last-child{
    top:19px;
    transform:rotate(-45deg);
  }

  .site-header.open .global-nav{display:none}

  .language-switch{
    transition:opacity .3s ease,transform .3s ease;
  }

  .site-header.open .language-switch{
    opacity:0;
    transform:translateY(-5px);
    pointer-events:none;
  }

  .sp-menu{
    display:block;
    position:fixed;
    inset:0;
    z-index:110;
    overflow:hidden;
    visibility:hidden;
    pointer-events:none;
    color:#111;
  }

  /*
   * clip-path は端末によってコマ落ちしやすいため、
   * 大きな円を transform:scale() でGPU描画して展開。
   */
  .sp-menu::before{
    content:"";
    position:absolute;
    width:180vmax;
    height:180vmax;
    right:-90vmax;
    top:-90vmax;
    border-radius:50%;
    background:
      linear-gradient(rgba(225,223,218,.96),rgba(225,223,218,.96)),
      url("../img/seamlessBg.webp") repeat;
    background-size:auto,512px;
    transform:scale(0);
    transform-origin:50% 50%;
    will-change:transform;
    transition:transform .88s cubic-bezier(.76,0,.24,1);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }

  .sp-menu-inner{
    position:relative;
    z-index:2;
    height:100%;
    padding:112px 24px 30px;
    display:flex;
    flex-direction:column;
    opacity:0;
    transform:translateY(12px);
    will-change:opacity,transform;
    transition:
      opacity .36s ease .20s,
      transform .55s cubic-bezier(.22,1,.36,1) .20s;
  }

  .sp-menu.is-active{
    visibility:visible;
  }

  body.menu-open .sp-menu{
    pointer-events:auto;
  }

  body.menu-open .sp-menu::before{
    transform:scale(1);
  }

  body.menu-open .sp-menu-inner{
    opacity:1;
    transform:translateY(0);
  }

  .sp-menu-nav{
    display:flex;
    flex-direction:column;
    border-top:1px solid rgba(17,17,17,.42);
  }

  .sp-menu-nav a{
    display:flex;
    align-items:baseline;
    gap:14px;
    border-bottom:1px solid rgba(17,17,17,.42);
    padding:9px 2px 7px;
    font-size:43px;
    line-height:.95;
    letter-spacing:.02em;
    opacity:0;
    transform:translate3d(0,28px,0);
    will-change:transform,opacity;
    transition:
      transform .62s cubic-bezier(.16,1,.3,1),
      opacity .45s ease;
  }

  .sp-menu-nav a span{
    width:24px;
    font-size:11px;
    line-height:1;
    opacity:.55;
  }

  body.menu-open .sp-menu-nav a{
    transform:translate3d(0,0,0);
    opacity:1;
  }

  body.menu-open .sp-menu-nav a:nth-child(1){transition-delay:.24s}
  body.menu-open .sp-menu-nav a:nth-child(2){transition-delay:.28s}
  body.menu-open .sp-menu-nav a:nth-child(3){transition-delay:.32s}
  body.menu-open .sp-menu-nav a:nth-child(4){transition-delay:.36s}
  body.menu-open .sp-menu-nav a:nth-child(5){transition-delay:.40s}
  body.menu-open .sp-menu-nav a:nth-child(6){transition-delay:.44s}
  body.menu-open .sp-menu-nav a:nth-child(7){transition-delay:.48s}
  body.menu-open .sp-menu-nav a:nth-child(8){transition-delay:.52s}

  .sp-menu-bottom{
    margin-top:auto;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    opacity:0;
    transform:translate3d(0,16px,0);
    will-change:opacity,transform;
    transition:
      opacity .42s ease .56s,
      transform .58s cubic-bezier(.16,1,.3,1) .56s;
  }

  body.menu-open .sp-menu-bottom{
    opacity:1;
    transform:translate3d(0,0,0);
  }

  .sp-menu-lang{
    display:flex;
    gap:14px;
    font-size:14px;
  }

  .sp-menu-lang a{opacity:.45}

  .sp-menu-lang a.active{
    opacity:1;
    text-decoration:underline;
    text-underline-offset:4px;
  }

  .sp-menu-sns{
    display:flex;
    gap:16px;
  }

  .sp-menu-sns a{
    display:block;
    width:28px;
    height:28px;
  }

  .sp-menu-sns img{
    width:100%;
    height:100%;
  }

  .page-home.menu-open .brand img{
    filter:none;
    transition:filter .35s ease;
  }

  .page-home.menu-open .menu-btn span{
    background:#111;
  }
}


/* Typography: LINE Seed JP based */
body{font-weight:400;letter-spacing:.01em}
.global-nav,.language-switch,.sp-menu-nav,.calendar-head,.filter-tabs,
.event-tile .date,.day-num,.cell-event,.news-more{font-weight:700}
h1,h2,.member-card strong,.event-title,.detail-row>h3{font-weight:700;letter-spacing:.035em}
.news-box,.address,.attention,.event-times,.price-table{font-weight:400}
.sp-menu-nav a{font-weight:700;letter-spacing:.015em}

.common-main{padding-top:70px;min-height:720px}
.common-main h1{font-size:52px;margin:0 0 70px}
.common-content{max-width:860px;margin:0 auto;border-top:1px solid var(--line);padding-top:28px;font-size:18px;line-height:1.9}
@media(max-width:900px){
  .common-main{padding-top:40px;min-height:600px}
  .common-main h1{font-size:38px;margin-bottom:45px}
  .common-content{font-size:15px}
}

.event-hero picture{display:block;width:100%;height:100%}.event-hero picture img{width:100%;height:100%;object-fit:cover}
