:root{
  --green:#445211;
  --red:#9e2a03;
  --red-text:#c33d22;
  --enjoy:#53a664;
  --ink:#111111;
  --paper:#ffffff;
  --bg:#14150e;
  --bg-2:#1b1c13;
  --fg:#ece9dd;
  --muted:#9a9587;
  --line:rgba(236,233,221,.14);
  --logo-outline:2.2;
  --gut:clamp(1.15rem, 4vw, 3.5rem);
  --maxw:72rem;
  --mincho:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  --gothic:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--gothic);font-size:16px;line-height:1.95;letter-spacing:.02em;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(4rem,11vh,7.5rem);position:relative}
.sec + .sec{border-top:1px solid var(--line)}

.head{margin-bottom:clamp(2rem,5vh,3.2rem)}
.kicker{
  display:inline-block;font-size:.75rem;letter-spacing:.34em;color:var(--red-text);
  text-transform:uppercase;margin:0 0 .9rem;font-weight:700;
}
h2{
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(1.6rem,5.2vw,2.6rem);line-height:1.45;letter-spacing:.08em;
  margin:0;color:#fff;
}
h3{font-family:var(--mincho);font-size:1.12rem;letter-spacing:.06em;margin:0 0 .6rem;color:#fff}
p{margin:0 0 1.2rem}
.lead{font-size:1.05rem;color:#dedacc}
.about__grid p{max-width:34rem}

.rv{display:block;overflow:hidden}
.rv > span{
  display:inline-block;
  transition:transform .9s cubic-bezier(.22,1,.36,1),opacity .9s cubic-bezier(.22,1,.36,1);
}
.js .rv > span{transform:translateY(105%);opacity:0}
.js .isIn .rv > span,.js .rv.isIn > span{transform:none;opacity:1}
.fade{transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.js .fade{opacity:0;transform:translateY(20px)}
.js .fade.isIn{opacity:1;transform:none}

.site-head{
  position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;padding:.9rem var(--gut);
  background:linear-gradient(180deg,rgba(20,21,14,.82),transparent);
  transition:background .35s ease;
}
.site-head.stuck{background:rgba(20,21,14,.94);backdrop-filter:blur(8px)}
.site-head .mini{display:flex;align-items:center;gap:.6rem;opacity:0;transition:opacity .4s ease}
.site-head.stuck .mini{opacity:1}
.site-head .mini svg{height:30px;width:auto;color:#fff}
.site-head .mini b{font-family:var(--mincho);font-size:.92rem;letter-spacing:.14em;font-weight:600}
nav ul{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0;font-size:.8rem;letter-spacing:.1em}
nav a{text-decoration:none;color:#dedacc;padding:.35rem .2rem;position:relative;display:inline-block;
       isolation:isolate;transition:color .3s ease}
nav a::before{
  content:"";position:absolute;z-index:-1;left:50%;top:50%;
  width:2.5em;aspect-ratio:1;translate:-50% -50%;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%229.98 138.7 239.24 239.13%22 role=%22img%22 aria-label=%22%E4%B8%89%E3%81%A4%E5%B7%B4%22%3E%3Cg%3E %3Cpath d=%22M204.2%2C245.2c5.3-52.7-17.5-86.8-65.1-106.5%2C7.5%2C1.5%2C15.1%2C2.4%2C22.5%2C4.5%2C25.1%2C7.1%2C46.1%2C20.8%2C62.1%2C41.5%2C19.7%2C25.6%2C28.9%2C54.8%2C24.4%2C86.8-3.7%2C26.5-18.5%2C46.7-42.8%2C58.8-20%2C9.9-41.9%2C4.7-57.1-12-13.5-14.8-16.5-31.4-7.9-49.2%2C9.5-19.8%2C33.4-36.1%2C60-25.3.9.4%2C1.9.7%2C4%2C1.4%22 fill=%22%239e2a03%22 /%3E %3Cpath d=%22M80.9%2C201.1c-22.2%2C8.5-39.2%2C22.5-50.1%2C43.2-10.8%2C20.6-13%2C42.5-8.2%2C65.3-.4%2C0-.7.2-1.1.3-1.8-4.4-3.8-8.7-5.3-13.3-8.4-26.2-8.5-52.5%2C1-78.5%2C11.8-32.2%2C33.5-55.6%2C65-69.1%2C15.7-6.7%2C32.4-6.6%2C48.9-2.4%2C11.6%2C3%2C22.4%2C8%2C30.8%2C16.8%2C14.2%2C14.8%2C15.4%2C32.2%2C9.6%2C51-7.9%2C25.5-34.2%2C33.1-52.2%2C28.4-14.1-3.7-26-10.1-32.8-23.4-2.5-4.8-3.4-10.4-5.1-15.7-.2-.7-.4-1.4-.7-2.7%22 fill=%22%239e2a03%22 /%3E %3Cpath d=%22M104.4%2C329.3c18.6%2C14.8%2C39%2C22.7%2C62.6%2C21.8%2C23.5-.9%2C43.4-10.4%2C60.9-25.6.3.3.6.7.9%2C1-5%2C5.7-9.6%2C11.9-15.2%2C17.1-32.2%2C30.1-70%2C40.7-113%2C30.4-18.3-4.4-35.5-12.1-48.6-26.2-15.8-16.9-24-37-22.2-60.5%2C1.5-18.8%2C11.2-32.2%2C28.5-39.3%2C6.6-2.8%2C14.1-4.3%2C21.3-4.8%2C21.1-1.5%2C38.2%2C15.8%2C42.6%2C34.5%2C3%2C12.6%2C3.2%2C24.9-4%2C36.2-3%2C4.7-7.2%2C8.6-11%2C12.8-.7.8-1.7%2C1.5-2.9%2C2.5%22 fill=%22%239e2a03%22 /%3E %3C/g%3E %3C/svg%3E") no-repeat center/contain;
  opacity:0;rotate:-120deg;
  clip-path:inset(0 100% 0 0);
  transition:opacity .4s ease, rotate .7s cubic-bezier(.22,1,.36,1),
             clip-path .55s cubic-bezier(.22,1,.36,1);
}
@media (hover:hover) and (pointer:fine){
  nav a:hover{color:#fff}
  nav a:hover::before{opacity:.6;rotate:0deg;clip-path:inset(0 0 0 0)}
}
@media (max-width:1024px){ nav{display:none} }

.m-nav{display:none}
.js .site-head .m-nav{opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}
.js .site-head.stuck .m-nav{opacity:1;visibility:visible;transition:opacity .4s ease}
@media (max-width:1024px){
  .m-nav{display:block;position:relative;margin-left:auto}
  .m-nav summary{
    list-style:none;display:flex;align-items:center;gap:.6rem;
    min-height:44px;padding:0 1.1rem;
    font-size:.9rem;letter-spacing:.12em;color:#fff;cursor:pointer;
    border:1px solid rgba(236,233,221,.45);border-radius:999px;
    background:rgba(20,21,14,.72);
    -webkit-user-select:none;user-select:none;
  }
  .m-nav summary::-webkit-details-marker{display:none}
  .m-nav summary::before{
    content:"";flex:0 0 auto;width:15px;height:11px;
    background:
      linear-gradient(currentColor 0 0) top/100% 1.5px no-repeat,
      linear-gradient(currentColor 0 0) center/100% 1.5px no-repeat,
      linear-gradient(currentColor 0 0) bottom/100% 1.5px no-repeat;
  }
  .m-nav[open] summary{border-color:var(--red-text);background:var(--bg-2)}
  .m-nav[open] summary::before{
    background:
      linear-gradient(45deg,transparent calc(50% - .75px),currentColor 0 calc(50% + .75px),transparent 0),
      linear-gradient(-45deg,transparent calc(50% - .75px),currentColor 0 calc(50% + .75px),transparent 0);
    width:12px;height:12px;
  }
  .m-nav ul{
    position:absolute;right:0;top:calc(100% + .5rem);
    width:min(16rem,calc(100vw - 2 * var(--gut)));
    margin:0;padding:.35rem 0;list-style:none;
    background:var(--bg-2);border:1px solid var(--line);
    box-shadow:0 18px 40px rgba(0,0,0,.5);
  }
  .m-nav ul::before{
    content:"";position:absolute;left:0;top:-1px;width:min(9rem,60%);height:1px;
    background:linear-gradient(90deg,var(--red-text),transparent);
  }
  .m-nav li + li{border-top:1px solid var(--line)}
  .m-nav a{
    display:flex;align-items:center;min-height:48px;padding:0 1.2rem;
    font-family:var(--mincho);font-size:1.05rem;letter-spacing:.08em;
    color:var(--fg);text-decoration:none;
  }
}
.m-nav summary:focus-visible,.m-nav a:focus-visible{
  outline:2px solid var(--red-text);outline-offset:3px;
}
.m-nav a:focus-visible{outline-offset:-4px}
.nojs-note{margin:1.6rem 0 0;font-size:.95rem;color:#dedacc}
.nojs-note a{color:#fff;text-decoration:underline;text-underline-offset:.2em}

.hero{position:relative;height:165vh}
.hero__media{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 38%;
  filter:contrast(1.14) saturate(.66) brightness(.52);
  transform:scale(1.12);
  will-change:transform;
}
.hero__mark{transition:opacity .2s linear}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% 30%, rgba(0,0,0,.15), rgba(0,0,0,.6) 70%),
    linear-gradient(180deg, rgba(20,21,14,.35) 0%, rgba(68,82,17,.42) 55%, rgba(20,21,14,.96) 100%);
}
.hero__mark{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;
  padding:6svh 1rem 3.5svh;
}
.hero__mark svg{
  height:min(64svh,560px);
  width:auto;
  max-width:min(42vw,23rem);
  margin-block:auto;
  color:var(--ink);
}
.hero__scroll{
  position:static;margin:0;flex:0 0 auto;
  padding-top:clamp(1.6rem,4svh,3rem);
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-size:.62rem;letter-spacing:.3em;color:#cfcbbc;opacity:.85;transition:opacity .8s ease 2.2s;
}
.js .hero__scroll{opacity:0}
.js .hero.isIn .hero__scroll{opacity:.85}
.hero__scroll i{display:block;width:1px;height:46px;background:linear-gradient(var(--red),transparent)}
@media (max-width:1024px){
  .hero{height:150vh}
  .hero__media img{object-position:50% 30%}
  .hero__mark{padding:5svh 1rem 3svh}
  .hero__mark svg{height:min(54svh,420px);max-width:min(60vw,17rem)}
}

.mark g{transform-box:fill-box;transform-origin:center}
.mark .ol{stroke-width:var(--logo-outline)}
#tomoe path{fill:var(--red)}
.js #tomoe{opacity:0}
.js #tomoe path{fill:#fff}
.js #i1,.js #i2,.js #i3,.js #t1,.js #t2,.js #t3,.js #t4,.js #t5,.js #t6{opacity:0}
.go #tomoe{
  animation:tomoeIn .72s cubic-bezier(.22,1,.36,1) forwards,
            strike .3s ease-out .58s;
}
.go #tomoe path{animation:ignite .4s ease-out .56s forwards}
@keyframes tomoeIn{from{opacity:0;transform:rotate(-120deg) scale(.86)}to{opacity:1;transform:none}}
@keyframes strike{50%{transform:scale(1.045)}}
@keyframes ignite{to{fill:var(--red)}}
@keyframes charIn{from{opacity:0;transform:scale(1.18) translateY(-4%)}to{opacity:1;transform:none}}
@keyframes subIn{from{opacity:0;transform:translateY(-8%)}to{opacity:1;transform:none}}
.go #i1{animation:charIn .55s cubic-bezier(.16,1,.3,1) .86s forwards}
.go #i2{animation:charIn .55s cubic-bezier(.16,1,.3,1) .99s forwards}
.go #i3{animation:charIn .55s cubic-bezier(.16,1,.3,1) 1.12s forwards}
.go #t1{animation:subIn .5s ease-out 1.34s forwards}
.go #t2{animation:subIn .5s ease-out 1.40s forwards}
.go #t3{animation:subIn .5s ease-out 1.46s forwards}
.go #t4{animation:subIn .5s ease-out 1.52s forwards}
.go #t5{animation:subIn .5s ease-out 1.58s forwards}
.go #t6{animation:subIn .5s ease-out 1.64s forwards}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:1.2rem}
.card{
  position:relative;background:var(--bg-2);border:1px solid var(--line);
  padding:1.5rem 1.6rem 1.7rem;overflow:hidden;
}
.card::before{content:"";position:absolute;inset:0 auto 0 0;width:4px}
.card.zen::before{background:var(--green)}
.card.isami::before{background:#fff}
.card time{display:block;font-family:var(--mincho);font-size:1.5rem;letter-spacing:.06em;color:#fff;line-height:1.2}
.card .tag{
  display:inline-block;margin:.9rem 0 .8rem;font-size:.78rem;letter-spacing:.16em;
  padding:.3em .9em;border-radius:999px;font-weight:700;
}
.card.zen .tag{background:var(--green);color:#fff}
.card.isami .tag{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.7)}
.card h3{font-size:1.2rem;margin:0 0 .9rem}
.card dl{margin:0;font-size:1rem;line-height:1.85;display:grid;grid-template-columns:4.6rem 1fr;gap:.1rem .6rem}
.card dt{color:var(--muted)}
.card dd{margin:0;color:#dedacc}
.card .perf{color:#fff}

.about__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.about__media{position:relative;overflow:hidden}
.about__media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  filter:contrast(1.08) saturate(.78) brightness(.82);
  transition:-webkit-clip-path 1.1s cubic-bezier(.76,0,.24,1),clip-path 1.1s cubic-bezier(.76,0,.24,1);
}
.js .about__media img{-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)}
.js .about__media.isIn img{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}
.since{font-family:var(--mincho);font-size:.95rem;letter-spacing:.14em;color:var(--red-text);margin-bottom:.4rem}
@media (max-width:1024px){
  .about__grid{grid-template-columns:1fr}
  .about__grid p{max-width:none}
  .about__media{max-width:34rem;margin-inline:auto}
}

.teams{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(2.4rem,6vh,4rem)}
.team{background:var(--bg-2);border:1px solid var(--line);padding:1.4rem 1.5rem 1.6rem;position:relative;overflow:hidden}
.team::before{content:"";position:absolute;inset:0 auto 0 0;width:4px}
.team.zen::before{background:var(--green)}
.team.isami::before{background:#fff}
.team.enjoy::before{background:var(--enjoy)}
.team::before{z-index:1}
.team__pic{display:block;width:calc(100% + 3rem);max-width:none;height:auto;aspect-ratio:3/2;object-fit:cover;
  margin:-1.4rem -1.5rem 1.1rem;border-bottom:1px solid var(--line)}
.team .tag{
  display:inline-block;font-size:.78rem;letter-spacing:.16em;padding:.3em .9em;
  border-radius:999px;font-weight:700;margin-bottom:.9rem;
}
.team.zen .tag{background:var(--green);color:#fff}
.team.isami .tag{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.7)}
.team.enjoy .tag{background:var(--enjoy);color:#10210f}
.team p{font-size:.92rem;margin:0}
.teams-lead{margin-top:2.2rem}
@media (max-width:1024px){ .teams{grid-template-columns:1fr} }

.band-img{
  position:relative;display:block;width:100%;margin:0;
  height:clamp(230px,40vh,460px);overflow:hidden;
  border-block:1px solid var(--line);
}
.band-img img{
  position:absolute;left:0;top:-9%;
  width:100%;height:118%;object-fit:cover;object-position:50% 42%;
  filter:contrast(1.1) saturate(.72) brightness(.62);
  will-change:transform;
}
.band-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,21,14,.55),rgba(20,21,14,.15) 45%,rgba(20,21,14,.75));
}
@media (max-width:1024px){ .band-img{height:clamp(190px,34vh,300px)} }

.join-shots{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2.4rem 0 2rem}
.join-shots figure{margin:0;overflow:hidden;--notch:14px;
  clip-path:polygon(var(--notch) 0,calc(100% - var(--notch)) 0,100% var(--notch),
    100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,
    var(--notch) 100%,0 calc(100% - var(--notch)),0 var(--notch));
  position:relative}
.join-shots img{width:100%;aspect-ratio:3/2;object-fit:cover;
  filter:contrast(1.1) saturate(.8) brightness(.9)}
.join-shots figcaption{position:absolute;left:0;right:0;bottom:0;padding:.6rem .9rem;
  font-size:.82rem;color:#efece1;letter-spacing:.06em;
  background:linear-gradient(180deg,transparent,rgba(20,21,14,.8))}
@media (max-width:560px){ .join-shots{grid-template-columns:1fr} }

#gallery-sec{overflow-x:clip}
.gallery{
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;
  margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);
  overscroll-behavior-x:contain;
}
.gallery::-webkit-scrollbar{display:none}
.gallery.isDragging{cursor:grabbing}
.gallery:focus-visible{outline:2px solid var(--red-text);outline-offset:4px}
.gallery__track{display:flex;gap:.7rem;width:max-content}
.gallery figure{margin:0;overflow:hidden;background:#000;flex:0 0 auto}
.gallery img{
  display:block;height:clamp(240px,32vw,420px);width:auto;
  filter:saturate(.8) brightness(.86);transition:transform .8s cubic-bezier(.22,1,.36,1),filter .5s ease;
  -webkit-user-drag:none;user-select:none;pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .gallery figure:hover img{transform:scale(1.045);filter:saturate(.95) brightness(1)}
}
@media (max-width:1024px){ .gallery img{height:clamp(240px,44vw,320px)} }

.booking{margin:0 0 2.8rem;padding:1.3rem 1.5rem;border:1px solid var(--line);background:var(--bg-2)}
.booking p{margin:0 0 .6rem;max-width:none}
.booking p:last-child{margin:0}
.booking a{color:#cfd8a8}
.regular li{padding:.85rem 0;border-bottom:1px solid var(--line);display:flex;gap:1rem;align-items:baseline}
.regular li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--red);transform:translateY(-.15em)}
.perf-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.6rem)}
.perf-cols > div{min-width:0}
@media (max-width:1024px){ .perf-cols{grid-template-columns:1fr;gap:2.6rem} }
.past{list-style:none;padding:0;margin:0}
.past li{display:grid;grid-template-columns:1fr auto;gap:.3rem .8rem;align-items:baseline;
         padding:.85rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.past time{grid-column:1/-1;font-family:ui-monospace,monospace;color:var(--muted);font-size:.85rem;letter-spacing:.06em}
.past .who{font-size:.75rem;letter-spacing:.14em;padding:.22em .7em;border-radius:999px;white-space:nowrap}
.past .who.zen{background:rgba(68,82,17,.85);color:#fff}
.past .who.isami{border:1px solid rgba(255,255,255,.55);color:#fff}

.join{background:var(--bg-2)}
.join .kicker{color:var(--enjoy)}
.join strong{color:var(--enjoy)}
.join .facts div:last-child dd{color:var(--enjoy)}
.join a{color:var(--enjoy)!important}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:2.4rem}
.facts div{background:var(--bg-2);padding:1.3rem 1.4rem}
.facts dt{font-size:.78rem;letter-spacing:.2em;color:var(--muted);margin-bottom:.45rem}
.facts dd{margin:0;font-family:var(--mincho);font-size:1.16rem;color:#fff;letter-spacing:.04em;line-height:1.6}
.facts dd small{display:block;font-family:var(--gothic);font-size:.76rem;color:var(--muted);letter-spacing:0;margin-top:.3rem}
.fee{color:var(--red)!important;font-size:1.9rem!important}

.contact-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;max-width:56rem}
.contact-list a{
  display:block;text-decoration:none;border:1px solid var(--line);padding:1.2rem 1.3rem;
  transition:border-color .35s ease,background .35s ease;
}
.contact-list b{display:block;font-family:var(--mincho);font-size:1.05rem;letter-spacing:.08em;color:#fff;margin-bottom:.25rem}
.contact-list span{font-size:.82rem;color:var(--muted)}
@media (hover:hover) and (pointer:fine){
  .contact-list a:hover{border-color:var(--red);background:rgba(158,42,3,.08)}
}

footer{padding:3rem var(--gut) 4rem;border-top:1px solid var(--line);color:var(--muted);font-size:.78rem}
footer .f-in{max-width:var(--maxw);margin-inline:auto;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
  #tomoe,#i1,#i2,#i3,#t1,#t2,#t3,#t4,#t5,#t6{opacity:1!important}
  #tomoe path{fill:var(--red)!important}
  .rv > span{transform:none!important;opacity:1!important}
  .fade{opacity:1!important;transform:none!important}
  .about__media img{-webkit-clip-path:none!important;clip-path:none!important}
  .hero__media img{transform:none}
}

body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E %3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E %3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E %3Crect width='220' height='220' filter='url%28%23n%29' opacity='0.55'/%3E%3C/svg%3E");
  opacity:.055;
  mix-blend-mode:overlay;
}
body > *{position:relative;z-index:1}

.join{position:relative;isolation:isolate}
.join::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%229.98 138.7 239.24 239.13%22 role=%22img%22 aria-label=%22%E4%B8%89%E3%81%A4%E5%B7%B4%22%3E%3Cg%3E %3Cpath d=%22M204.2%2C245.2c5.3-52.7-17.5-86.8-65.1-106.5%2C7.5%2C1.5%2C15.1%2C2.4%2C22.5%2C4.5%2C25.1%2C7.1%2C46.1%2C20.8%2C62.1%2C41.5%2C19.7%2C25.6%2C28.9%2C54.8%2C24.4%2C86.8-3.7%2C26.5-18.5%2C46.7-42.8%2C58.8-20%2C9.9-41.9%2C4.7-57.1-12-13.5-14.8-16.5-31.4-7.9-49.2%2C9.5-19.8%2C33.4-36.1%2C60-25.3.9.4%2C1.9.7%2C4%2C1.4%22 fill=%22%239e2a03%22 /%3E %3Cpath d=%22M80.9%2C201.1c-22.2%2C8.5-39.2%2C22.5-50.1%2C43.2-10.8%2C20.6-13%2C42.5-8.2%2C65.3-.4%2C0-.7.2-1.1.3-1.8-4.4-3.8-8.7-5.3-13.3-8.4-26.2-8.5-52.5%2C1-78.5%2C11.8-32.2%2C33.5-55.6%2C65-69.1%2C15.7-6.7%2C32.4-6.6%2C48.9-2.4%2C11.6%2C3%2C22.4%2C8%2C30.8%2C16.8%2C14.2%2C14.8%2C15.4%2C32.2%2C9.6%2C51-7.9%2C25.5-34.2%2C33.1-52.2%2C28.4-14.1-3.7-26-10.1-32.8-23.4-2.5-4.8-3.4-10.4-5.1-15.7-.2-.7-.4-1.4-.7-2.7%22 fill=%22%239e2a03%22 /%3E %3Cpath d=%22M104.4%2C329.3c18.6%2C14.8%2C39%2C22.7%2C62.6%2C21.8%2C23.5-.9%2C43.4-10.4%2C60.9-25.6.3.3.6.7.9%2C1-5%2C5.7-9.6%2C11.9-15.2%2C17.1-32.2%2C30.1-70%2C40.7-113%2C30.4-18.3-4.4-35.5-12.1-48.6-26.2-15.8-16.9-24-37-22.2-60.5%2C1.5-18.8%2C11.2-32.2%2C28.5-39.3%2C6.6-2.8%2C14.1-4.3%2C21.3-4.8%2C21.1-1.5%2C38.2%2C15.8%2C42.6%2C34.5%2C3%2C12.6%2C3.2%2C24.9-4%2C36.2-3%2C4.7-7.2%2C8.6-11%2C12.8-.7.8-1.7%2C1.5-2.9%2C2.5%22 fill=%22%239e2a03%22 /%3E %3C/g%3E %3C/svg%3E");
  background-size:300px 150px;
  opacity:.035;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}

#about{position:relative;isolation:isolate;overflow:hidden}
#about::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  right:-14vw;top:-8vh;width:58vw;aspect-ratio:1;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%229.98 138.7 239.24 239.13%22 role=%22img%22 aria-label=%22%E4%B8%89%E3%81%A4%E5%B7%B4%22%3E%3Cg%3E %3Cpath d=%22M204.2%2C245.2c5.3-52.7-17.5-86.8-65.1-106.5%2C7.5%2C1.5%2C15.1%2C2.4%2C22.5%2C4.5%2C25.1%2C7.1%2C46.1%2C20.8%2C62.1%2C41.5%2C19.7%2C25.6%2C28.9%2C54.8%2C24.4%2C86.8-3.7%2C26.5-18.5%2C46.7-42.8%2C58.8-20%2C9.9-41.9%2C4.7-57.1-12-13.5-14.8-16.5-31.4-7.9-49.2%2C9.5-19.8%2C33.4-36.1%2C60-25.3.9.4%2C1.9.7%2C4%2C1.4%22 fill=%22%239e2a03%22 /%3E %3Cpath d=%22M80.9%2C201.1c-22.2%2C8.5-39.2%2C22.5-50.1%2C43.2-10.8%2C20.6-13%2C42.5-8.2%2C65.3-.4%2C0-.7.2-1.1.3-1.8-4.4-3.8-8.7-5.3-13.3-8.4-26.2-8.5-52.5%2C1-78.5%2C11.8-32.2%2C33.5-55.6%2C65-69.1%2C15.7-6.7%2C32.4-6.6%2C48.9-2.4%2C11.6%2C3%2C22.4%2C8%2C30.8%2C16.8%2C14.2%2C14.8%2C15.4%2C32.2%2C9.6%2C51-7.9%2C25.5-34.2%2C33.1-52.2%2C28.4-14.1-3.7-26-10.1-32.8-23.4-2.5-4.8-3.4-10.4-5.1-15.7-.2-.7-.4-1.4-.7-2.7%22 fill=%22%239e2a03%22 /%3E %3Cpath d=%22M104.4%2C329.3c18.6%2C14.8%2C39%2C22.7%2C62.6%2C21.8%2C23.5-.9%2C43.4-10.4%2C60.9-25.6.3.3.6.7.9%2C1-5%2C5.7-9.6%2C11.9-15.2%2C17.1-32.2%2C30.1-70%2C40.7-113%2C30.4-18.3-4.4-35.5-12.1-48.6-26.2-15.8-16.9-24-37-22.2-60.5%2C1.5-18.8%2C11.2-32.2%2C28.5-39.3%2C6.6-2.8%2C14.1-4.3%2C21.3-4.8%2C21.1-1.5%2C38.2%2C15.8%2C42.6%2C34.5%2C3%2C12.6%2C3.2%2C24.9-4%2C36.2-3%2C4.7-7.2%2C8.6-11%2C12.8-.7.8-1.7%2C1.5-2.9%2C2.5%22 fill=%22%239e2a03%22 /%3E %3C/g%3E %3C/svg%3E") no-repeat center/contain;
  opacity:.07;
}
@media (max-width:1024px){ #about::after{right:-34vw;width:110vw;opacity:.03} }

.gallery figure,
.about__media{
  --notch:14px;
  clip-path:polygon(
    var(--notch) 0, calc(100% - var(--notch)) 0, 100% var(--notch),
    100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%,
    var(--notch) 100%, 0 calc(100% - var(--notch)), 0 var(--notch));
}
.about__media{--notch:22px}
@media (max-width:1024px){ .gallery figure{--notch:10px} .about__media{--notch:14px} }

.gallery figure,.about__media{position:relative}
.gallery figure::after,.about__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E %3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E %3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E %3Crect width='220' height='220' filter='url%28%23n%29' opacity='0.55'/%3E%3C/svg%3E");
  opacity:.09;mix-blend-mode:overlay;
}

.sec > .wrap > .head{position:relative;padding-top:1.6rem}
.sec > .wrap > .head::before{
  content:"";position:absolute;left:0;top:0;width:min(14rem,42%);height:1px;
  background:linear-gradient(90deg,var(--red),transparent);
  opacity:.65;
}
.sec.join > .wrap > .head::before{background:linear-gradient(90deg,var(--enjoy),transparent);opacity:.5}

.card .note-line{margin:.9rem 0 0;font-size:.88rem;color:var(--muted)}
.card.prev{opacity:.92}
.card.prev time{color:#dedacc}
.card .prev-label{margin:0 0 .5rem;font-size:.82rem;letter-spacing:.16em;color:var(--muted)}
.cards .lead-line{align-self:center;margin:0;font-size:.95rem;line-height:1.9;color:#dedacc}
.cards .lead-line a{color:#fff;text-decoration:underline;text-underline-offset:.2em}
.past li.empty{display:block;color:var(--muted);font-size:.88rem}

.gallery figure,
.about__media,
.join-shots figure{
  --frame:1px;
  --frame-ink:var(--red);
  --inner:calc(var(--notch) - 0.5858 * var(--frame));
  padding:var(--frame);
  background:var(--frame-ink);
}
.join-shots figure{ --frame-ink:rgba(83,166,100,.5) }
.pic{
  display:block;line-height:0;
  clip-path:polygon(
    var(--inner) 0, calc(100% - var(--inner)) 0, 100% var(--inner),
    100% calc(100% - var(--inner)), calc(100% - var(--inner)) 100%,
    var(--inner) 100%, 0 calc(100% - var(--inner)), 0 var(--inner));
}
.gallery .pic{background:#000}
.about__media .pic{background:#321a0c}

#shutsuen, #contact{
  --ramp:.13;
  --grain:.18;
  isolation:isolate;
  background-image:linear-gradient(180deg, rgba(68,82,17,0) 0%, rgba(68,82,17,var(--ramp)) 100%);
}
#shutsuen::before, #contact::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("../img/grain.png");
  background-size:160px;
  opacity:var(--grain);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 45%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 45%);
}

#next{
  background-image:linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,0) 320px);
}