:root{
  --white:#fff;
  --white-soft:#fefefe;
  --white-80:rgba(255,255,255,.8);
  --white-50:rgba(255,255,255,.5);
  --mono:'Noto Sans','Noto Sans JP',sans-serif;
  --sans-en:'Noto Sans','Noto Sans JP',sans-serif;
  --sans-ja:'Noto Sans JP','Noto Sans',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#0c0c0c;color:var(--white);font-family:var(--sans-ja);font-weight:400;-webkit-font-smoothing:antialiased}
img{display:block}
.sp-only{display:none}

/* ---- layered photo background (PC) ---- */
.page{position:relative;overflow:clip}
.bg,.bg-sp{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column}
.bg-sp{display:none}
.bg::after,.bg-sp::after{content:"";display:block;flex:1;background:#0c0c0c}
.shot{position:relative;width:100%;overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover}
.shot .veil{position:absolute;inset:0;pointer-events:none}
.veil-soft{background:rgba(0,0,0,.2);mix-blend-mode:soft-light}
.veil-hard{background:rgba(0,0,0,.3);mix-blend-mode:hard-light}
.shot-1{aspect-ratio:1440/1080}
.shot-2{aspect-ratio:1550/1033}
.shot-3{aspect-ratio:1600/1200}
.sp-1{aspect-ratio:393/798}
.sp-2{aspect-ratio:393/650}
.sp-3{aspect-ratio:393/690}
.sp-4{aspect-ratio:393/611}
.sp-5{aspect-ratio:393/637}
.sp-6{aspect-ratio:393/545}

/* ---- content ---- */
.content{position:relative;z-index:1;max-width:1351px;margin:0 auto;padding:0 45px 0 90px}
.inner{max-width:1261px}

/* logo */
.logo{position:relative;width:min(752px,100%);padding-top:8px}
.logo .upper{width:88.5%;height:auto}
.logo .lower{width:98.8%;height:auto;margin-top:28px;margin-left:1.2%}
.logo .sp-upper{width:88%;height:auto}
.logo .sp-lower{width:98.1%;height:auto;margin-top:13px;margin-left:1.2%}

/* reservation */
.reservation{display:flex;align-items:center;margin-top:58px;width:403px;max-width:100%;height:72px;
  padding:11px 30px 12px 38px;border:1px solid var(--white);border-radius:5px;
  background:rgba(0,0,0,.2);text-decoration:none;color:var(--white-soft);
  transition:background .3s ease}
.reservation:hover{background:rgba(255,255,255,.12)}
.reservation:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.reservation .texts{display:flex;align-items:baseline;gap:22px;white-space:nowrap}
.reservation .en{font-family:var(--mono);font-size:20px;letter-spacing:1px}
.reservation .ja{font-size:14px;font-weight:400}
.reservation .sep{width:1px;height:49px;background:var(--white-soft);opacity:.3;margin:0 18px;flex:none}
.reservation .arrow{width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid var(--white-soft)}

/* event */
.event{margin-top:130px;max-width:711px}
.event-head{display:flex;align-items:center;gap:21px}
.event-head .icon{width:47px;height:47px;flex:none;display:block;transition:opacity .25s ease}
.event-head a.icon:hover{opacity:.65}
.event-head a.icon:focus-visible{outline:2px solid #fff;outline-offset:3px}
.event-head .icon svg{width:100%;height:100%}
.event-head p{font-size:12px;line-height:19px;letter-spacing:.22px;font-weight:400}
.event-head .en-line{font-family:var(--mono)}

/* descriptions */
.description{margin-top:34px;display:flex;flex-direction:column;gap:29px}
.desc-ja{font-family:'Noto Sans JP',var(--sans-ja);font-size:16px;line-height:32px;font-weight:400}
.desc-en{font-family:var(--sans-en);font-weight:400;font-size:14px;line-height:26px;color:var(--white-80)}
.desc-en .gap{height:32px}

/* information */
.information{margin-top:58px;display:flex;flex-direction:column;gap:54px}
.info-row{display:flex;align-items:flex-start}
.info-row .label{font-family:var(--mono);font-weight:400;font-size:16px;letter-spacing:.32px;width:171px;flex:none}
.info-row.tel .label{width:184px}
.info-row.addr .label{width:181px}
.col-ja{width:444px;flex:none;font-size:14px;line-height:26px;font-weight:400}
.col-ja .num{font-family:var(--sans-en);font-weight:400}
.col-en{font-family:var(--mono);font-size:14px;line-height:26px;letter-spacing:.28px;margin-left:121px;max-width:461px}
.addr .col-en{font-family:var(--sans-en);letter-spacing:0;margin-left:111px;max-width:444px}
.addr .col-ja{line-height:1.55}
.tel .col-ja{font-size:14px;line-height:2}
.blankline{height:26px}
.map-link{color:inherit;text-decoration:none}
.tel-link{color:inherit;text-decoration:none}

/* bottom photos */
.photos{margin-top:160px;display:flex;width:100%}
.photos>div{position:relative;overflow:hidden}
.photos .p-ext{width:38.2%;flex:none;border:1px solid var(--white-50)}
.photos .p-int{width:61.8%;flex:none}
.photos img{width:100%;height:556px;object-fit:cover}
.map-pin-link{position:absolute;left:48.3%;top:48.5%;z-index:2;width:96px;height:112px;
  transform:translate(-50%,-50%);border-radius:50%;cursor:pointer}
.map-pin-link:focus-visible{outline:2px solid var(--white);outline-offset:4px}

/* footer */
.copyright{position:relative;z-index:1;text-align:center;font-family:var(--mono);font-weight:400;
  font-size:12px;letter-spacing:.24px;padding:61px 0 24px}

/* ---- motion (inspired by quiet, breathing studio-site animation) ---- */
:root{--ease-out:cubic-bezier(.19,1,.22,1)}
@media (prefers-reduced-motion:no-preference){
  /* scroll reveal: slow rise + fade */
  .fx{opacity:0;transform:translateY(26px);
    transition:opacity 1.3s var(--ease-out),transform 1.3s var(--ease-out)}
  .fx.in{opacity:1;transform:none}

  /* hero load sequence: blur resolving into focus */
  .hero-fx{opacity:0;filter:blur(10px);transform:translateY(14px);
    transition:opacity 1.8s var(--ease-out),filter 1.8s var(--ease-out),transform 1.8s var(--ease-out)}
  body.loaded .hero-fx{opacity:1;filter:blur(0);transform:none}
  body.loaded .logo .lower,body.loaded .logo .sp-lower{transition-delay:.45s}
  body.loaded .reservation.hero-fx{transition-delay:.9s}

  /* background photos: imperceptible ken-burns once in view */
  .shot img{transform:scale(1);transition:transform 20s linear}
  .shot.kb img{transform:scale(1.07)}
  .shot:nth-child(even).kb img{transform:scale(1.07) translateX(-1.5%)}

  /* reservation hover: arrow slips right, line breathes */
  .reservation .arrow{transition:transform .45s var(--ease-out)}
  .reservation:hover .arrow{transform:translateX(5px)}
  .reservation .sep{transition:opacity .45s ease}
  .reservation:hover .sep{opacity:.7}
}

/* ---- tablet squeeze ---- */
@media (max-width:1100px) and (min-width:521px){
  .content{padding:0 32px}
  .info-row{flex-wrap:wrap;gap:12px 0}
  .info-row .label{width:100%!important;margin-bottom:2px}
  .col-en{margin-left:60px!important}
}

/* ---- SP design (Figma node 3:2), breakpoint 520px ---- */
@media (max-width:520px){
  .pc-only{display:none!important}
  .sp-only{display:block}
  .bg{display:none}
  .bg-sp{display:flex}

  .content{padding:min(199px,50.6vw) 26px 0}
  .inner{max-width:343px;margin:0 auto}

  .logo{margin-top:0;padding-top:0;width:100%}

  .reservation{margin-top:41px;width:100%;height:57px;border-radius:6px;
    padding:11px 22px 10px 23px}
  .reservation .texts{gap:18px}
  .reservation .en{font-size:16px;letter-spacing:.8px}
  .reservation .ja{font-size:12px}
  .reservation .sep{height:36px;margin:0 20px 0 auto}

  .event{margin-top:41px;max-width:none}
  .event-head{justify-content:space-between;gap:16px}
  .event-head .icon{width:44px;height:44px}
  .event-head p{font-size:10px;line-height:15px;letter-spacing:0;max-width:288px}
  .event-head .en-line{font-family:inherit;font-size:9px}

  .description{margin-top:41px;gap:41px}
  .desc-ja{font-size:14px;line-height:28px}
  .desc-ja br{display:none}
  .desc-en{font-family:var(--mono);font-size:12px;line-height:20px;color:var(--white)}
  .desc-en .gap{height:20px}

  .information{margin-top:41px;gap:0;font-weight:400}
  .info-row{flex-direction:column}
  .info-row .label{font-family:var(--sans-ja);font-weight:400;font-size:14px;line-height:20px;
    letter-spacing:0;width:auto!important;margin-bottom:20px}
  .col-ja,.col-en{width:100%;max-width:100%;margin-left:0!important;
    font-family:var(--sans-ja);font-size:12px;line-height:20px;letter-spacing:0;font-weight:400}
  .addr .col-ja{line-height:20px}
  .tel .col-ja{font-size:12px;line-height:20px}
  .col-en{margin-top:20px}
  .info-row+.info-row{margin-top:20px}
  .blankline{height:20px}
  .map-link{text-decoration:underline;text-decoration-thickness:from-font;text-underline-position:from-font}

  .photos{margin-top:41px;flex-direction:column}
  .photos .p-int{order:1;width:100%;aspect-ratio:343/354}
  .photos .p-ext{order:2;width:100%;aspect-ratio:343/372;border-color:var(--white-50)}
  .photos img{height:100%}
  .map-pin-link{width:72px;height:88px}

  .copyright{padding:41px 0 28px}
}