html.is-locked, body.is-locked {
    height: 100%;
    overflow: hidden;
}

body{
    margin: 0;
}
#dd_shinagawa{
  width: 100vw;
}
.pc-only{
  display: block;
}
.sp-only{
  display: none;
}
@media (max-width: 768px){
  .pc-only{
    display: none;
  }
  .sp-only{
    display: block;
  }
}
/*nevi*/
  header.site-header{
    position:sticky; top:0; z-index:var(--z-header);
    display:flex; align-items:center;
    padding:20px 22px;
    border-bottom:1px solid var(--border);
    z-index: 99999;
  }

  .hamburger{
    --size: 36px;
    inline-size: var(--size);
    block-size: var(--size);
    display:inline-grid; place-items:center;
    border:0; background:transparent; padding:0; cursor:pointer;
    -webkit-tap-highlight-color: transparent;
  }
  @media (min-width: 768px){
    .hamburger{ --size: 32px; }
  }
  .hamburger:focus-visible{ outline:2px solid #000; outline-offset:4px; }
  .hamburger-box{ position:relative; inline-size: 24px; block-size: 24px; }
  .hamburger-line{
    position:absolute; left:0; right:0; height:2px; background:var(--ink); border-radius:2px;
    transition: transform var(--dur) var(--e), opacity var(--dur) var(--e), top var(--dur) var(--e), bottom var(--dur) var(--e);
  }
  .hamburger-line:nth-child(1){ top:4px; }
  .hamburger-line:nth-child(2){ top:11px; }
  .hamburger-line:nth-child(3){ bottom:4px; }

  .is-active .hamburger-line:nth-child(1){ top:11px; transform:rotate(45deg);background-color: #fff; }
  .is-active .hamburger-line:nth-child(2){ opacity:0; transform:translateX(-6px); }
  .is-active .hamburger-line:nth-child(3){ bottom:auto; top:11px; transform:rotate(-45deg);background-color: #fff; }

  .dummy{ height:100vh; background:linear-gradient(#fff,#f6f6f6); border-radius:12px; }

  .menu-overlay{
    position:fixed; inset:0; z-index:var(--z-menu);
    background:var(--overlay);
    opacity:0;
    pointer-events:none;
    transition: opacity var(--dur) var(--e);
    display:grid; grid-template-rows:auto 1fr auto;
    padding:8px 12px;
  }
  .menu-overlay.is-open{
    opacity:1;
    pointer-events:auto;
    z-index: 99999;
    background-color: #b9921a;
  }

  .menu-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 4px; border-bottom:1px solid var(--border);
  }
  .menu-title{ font-weight:700; letter-spacing:.02em;color: #fff;font-family: 'Sackers Gothic Std', "Sackers Gothic", sans-serif; }

  .menu-inner{
    display:grid; grid-template-rows:1fr auto;
    padding: 16px 8px 20px;
  }

  nav.menu-nav{
    display:grid; align-content:center; justify-items:center;
  }
  .menu-list{ list-style:none; margin:0; padding:0; display:grid; gap: min(20px, 3.2vh);justify-items: center;text-align: center; }
  .menu-list a{
    display:block; text-decoration:none; color:var(--ink);
    font-weight:700; text-align:center;
    color: #fff;
    font-family: 'Sackers Gothic Std', "Sackers Gothic", sans-serif;
    font-size: clamp(22px, 6vw, 34px);
    line-height:1.3;
    transform:translateY(4px); opacity:0;
    transition: transform var(--dur) var(--e), opacity var(--dur) var(--e);
  }
  .menu-list small{
    color: #fff;
    font-family: "a-otf-ryumin-pr6n", serif;

  }
  .menu-overlay.is-open .menu-list a{ transform:translateY(0); opacity:1; }
  .menu-list li:nth-child(1) a{ transition-delay:50ms; }
  .menu-list li:nth-child(2) a{ transition-delay:100ms; }
  .menu-list li:nth-child(3) a{ transition-delay:150ms; }
  .menu-list li:nth-child(4) a{ transition-delay:200ms; }
  .menu-list li:nth-child(5) a{ transition-delay:250ms; }
  .menu-list li:nth-child(6) a{ transition-delay:300ms; }

  .menu-footer{
    display:flex; gap:16px; justify-content:center; padding-block:12px 16px; border-top:1px solid var(--border);
  }
  .menu-footer a{ color:#FFF; text-decoration:none; font-size:14px; }

/*hero*/
.hero{
  min-height: 100vh;
  display: flex;
  margin: -70px 0 0 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  place-items: center;
  font-family: "a-otf-ryumin-pr6n", serif;
}
  
.intro-line{
    white-space: nowrap;
    text-align: center;
}
.fade-text{
    display:inline-block;
    font-size:40px; line-height:1.4;
    color:transparent;
    -webkit-text-fill-color:transparent;
    background-clip:text; -webkit-background-clip:text;
    --ink:#222; --duration:1.6s; --delay:.6s;
    --ease:cubic-bezier(.25,.8,.25,1);
    --dist:14px;
    background-size:300% 100%;
}
.fade-text.to__right{
    background-image:linear-gradient(to right, var(--ink) 30%, transparent 60%);
    background-position:left 100% center;
    transform:translateX(calc(-1 * var(--dist)));
    animation:toRight var(--duration) var(--ease) var(--delay) forwards;
}
@keyframes toRight{
    to{
        transform:translateX(0);
        background-position:left 0% center;
    }
}
.hero .stack { position: static !important; }
.hero { position: relative; overflow: visible !important; }
.hero .intro-line { overflow: visible !important; }
.hero .reveal-img{
      left: 50%; 
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: clamp(640px, 95vw, 900px) !important;
  max-width: none !important;
  height: auto !important;
  object-fit: contain;
  z-index: 5 !important;
  pointer-events: none;
}
.hero .fade-text { position: relative; z-index: 1; }

.stack{
    position: relative;
    display: inline-block;
    margin-left: .35em;
    line-height: 1;
}
.on-top{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translateX(-20px);
    z-index: 2;
    pointer-events: none;
    background: #fff;
    padding: 0;
}
.reveal-img{
    position: absolute;
    left: 8%;
    top: -10%;
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 0;
    width: 72vw;
    height: auto;
    animation: fadeInCenter 1.2s ease forwards;
    animation-delay: var(--delay, 0s);
}

@keyframes fadeInCenter {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.05);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(0);
    }
}
@keyframes imgIn{
    0%   { opacity:0; filter:blur(4px); transform: translate(-50%, -50%) translateX(-20px); }
    60%  { opacity:1; filter:blur(0);   transform: translate(-50%, -50%) translateX(3px); }
    100% { opacity:1; filter:blur(0);   transform: translate(-50%, -50%) translateX(0); }
}
@media (prefers-reduced-motion: reduce){
    .fade-text{ animation:none !important; transform:none !important;
        -webkit-text-fill-color:initial; color:var(--ink);
        -webkit-background-clip:initial; background-clip:initial; background-image:none;
    }
    .reveal-img{ animation:none !important; opacity:1; transform:none; filter:none; }
}
/*hero-sp*/
@media (max-width: 768px){
  .hero{
    justify-content: flex-start;
    padding-top: 35vh;
  }
  .hero .intro-line{
    white-space: normal;
    padding: 0 6vw;
  }
  .hero .fade-text{
    font-size: clamp(28px, 6.8vw, 48px);
    line-height: 1.8;
  }

  .hero .reveal-img{
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%) scale(1);
    width: clamp(260px, 90vw, 620px) !important;
  }
  
  .scroll_down a{
    z-index: 9999;
  }
  
}


/*scroll*/
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');

.scroll_down{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  animation: sdEnter 0.9s ease forwards;
  animation-delay: var(--delay, 0s);
  z-index: 9999;
}
.scroll_down a{
  position: absolute;
  left: -4px;
  bottom: -30px;
  color: #666;
  font-size: 10px;
  font-family: 'Sackers Gothic Std', "Sackers Gothic", sans-serif;
  letter-spacing: .2em;
  writing-mode: vertical-lr;
  text-decoration: none;
  text-transform: uppercase;
  transform: rotate(270deg);
  
}

.scroll_down:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background:#666;
  transform: translateX(-50%) translateZ(0);
  animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
}

@keyframes circlemove{
  0%{bottom:100px;}
  100%{bottom:0px;}
}
@keyframes cirlemovehide{
  0%{opacity:0}
  50%{opacity:1;}
  80%{opacity:0.9;}
  100%{opacity:0;}
}
.scroll_down:after{
  content:"";
  position: absolute;
  bottom:15px;
  left:50%;
  transform: translateX(-50%) translateZ(0);
  width:0.5px;
  height: 100px;
  background:#666;
}

@keyframes sdEnter{
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
/*scroll-sp*/
@media (max-width: 768px){
.scroll_down{
    position: absolute;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 1;
  }
}
/*message*/
.message{
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  gap: 40px;
  margin: 0 140px;
  padding: 140px 0;
  background-color: #fff;
}
.message .text_wrapper{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4rem;
}
.message p{
  line-height: 2.6rem;
  font-size: 24px;
  font-family: "a-otf-ryumin-pr6n", serif;
  letter-spacing: 0.5;
}
.message img{
  flex: 1;
  max-height: 420px;
  min-height: 419px;
  max-width: 550px;
  min-width: 515px;
}
/*message-sp*/
@media (max-width: 1200px){
  .message{
    flex-direction: column;
    align-items: center;
  }

}
@media (max-width: 768px){
.message{
    flex-direction: column;
    gap: 24px;
    padding: 40px 0 70px;
    margin: 0 6vw;
  }
  .message .text_wrapper{
    order: 1;
    gap: 0.5rem;
  }
  .message img{
    order: 2;
    width: 100%;
    height: auto;
    max-height: unset;
    min-height: unset;
    max-width: unset;
    min-width: unset;
  }
  .message p{
    font-size: clamp(16px, 4.4vw, 18px);
    line-height: 1.9;
    letter-spacing: 0.04em;
  }
}

/*fadein*/
.fadein {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 2.0s ease, transform 2.0s ease;
}
.fadein.show {
  opacity: 1;
  transform: translateY(0);
}
/*fadein-sp*/
@media (max-width: 768px){
  .fadein{
    transform: translateY(16px);
    transition: opacity .9s ease, transform .9s ease;
  }
}

/*base*/
.base{
  position: relative;
  z-index: 2;
  padding: 80px 0 0;
  margin: 100px 0 0 0;
  background-color: #b9921a;
}
.base h2{
  margin: 0 auto;
  font-size:50px;
  line-height: 5rem;
  color: #FFF;
  font-family: 'Sackers Gothic Std', "Sackers Gothic";
  text-align: center;
}
.base-text{
  margin: 0 auto 90px;
  color: #fff;
  text-align: center;
  font-family: a-otf-ryumin-pr6n, serif;
  font-size: 16px;
}
.base-text span{
  display: block;
  font-family: sans-serif;
  margin-top: 14px;
}
/*base-sp*/
@media (max-width: 768px){
  .base{
    padding: 50px 0;
  }
  .base h2{
    font-size: 26px;
    line-height: 2.4rem;
}
.base-text {
    margin: 0 10px 30px;
    font-size: 14px;
  }
}
/*map*/
  :root{
    --ink:#222; --muted:#666; --hint:#f6f7f8;
    --bubble-bg:#111; --bubble-ink:#fff;
  }
  *{box-sizing:border-box}
  body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:var(--ink);}
  .wrap{
    margin: 0 auto;
    padding: 70px 160px 60px;
    max-width: unset;
    background-color: #fff;
  }
  .map-stage{
    position:relative;
    overflow:visible;
    aspect-ratio:1436.97/1223.83
  }
  .map-stage svg{width:100%;height:auto;display:block}
  .map-stage [data-hotspot]{cursor:pointer;outline:none;transition:filter .15s ease,opacity .15s ease}

  /* map-text */
  .bubble{
    position:absolute;left:0;top:0;transform:translate(-50%,-16px);
    background:var(--bubble-bg);
    color:var(--bubble-ink);
    padding:20px 24px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.2);
    font-size:13px;line-height:1.5;max-width:min(280px, 70vw);
    pointer-events:none;opacity:0;transition:opacity .12s ease;
    z-index:5;white-space:normal;
  }
  .bubble.is-show{opacity:1}
  .bubble .title{font-weight:700;margin:0 0 4px 0;font-size:14px}
  .bubble .meta{color:#bbb;margin:2px 0 6px 0;font-size:12px}
  .bubble .body{opacity:.95}
  .bubble:after{ content:""; position:absolute; left:50%; transform:translateX(-50%); border:8px solid transparent; }
  .bubble.dir-top { transform:translate(-50%,-16px); }
  .bubble.dir-top:after{ bottom:-8px; border-top-color:var(--bubble-bg); }
  .bubble.dir-bottom { transform:translate(-50%,16px); }
  .bubble.dir-bottom:after{ top:-8px; border-bottom-color:var(--bubble-bg); }

  .zoom-ui{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:8px;z-index:10}
  .zoom-ui button{width:36px;height:36px;border-radius:8px;border:1px solid #e5e8ea;background:#fff;cursor:pointer}
/* map-animation */
.map-stage [data-hotspot] {
  transition: transform 0.25s ease-out, filter 0.25s ease-out;
  transform-box: fill-box;
  transform-origin: center;
}

.map-stage [data-hotspot]:hover,
.map-stage [data-hotspot].is-hover,
.map-stage [data-hotspot]:focus-visible {
  transform: scale(1.1);
}
/*map-sp*/
@media (max-width:1120px){
  .wrap{
    padding: 70px 60px;
  }
}
@media (max-width:768px){
  .wrap{
    padding: 30px 0;
  }
  .bubble{
    min-width: 280px;
  }
}

/*category*/

:root { --bg:#fff; --fg:#111; --muted:#6b7280; --line:#e5e7eb; }
#category .wrapper{background:unset;padding-top: 0 !important;}

/* section */
.category{position:relative;z-index:3;padding:24px 160px;background:#b9921a;}
.category__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:1024px){.category__grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:768px){
  .category__grid{
    grid-template-columns:repeat(6,1fr);}}

/* card */
.card{overflow:hidden;background:#fff;display:flex;flex-direction:column;cursor:pointer;transition:.3s;}
.card__media{aspect-ratio:1/0.9;overflow:hidden;background:#f7f7f7;}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.card__body{position:relative;padding:12px 12px 20px;display:flex;flex-direction:column;gap:6px;}
.card__number{position:absolute;top:20px;height:34px;padding-left:14px;}
.card__name{margin:10px 0 0 60px;font-size:15px;font-weight:300;font-family:'Sackers Gothic Std',sans-serif;}
.card__name small {display: block;font-family: a-otf-ryumin-pr6n, serif;}
.card__cta{margin-top:auto;display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:13px;color:var(--muted);}
.card:hover .card__media img{transform:scale(1.04);}
.card:active{opacity:.96;}

/* modal */
.product-modal{position:fixed;inset:0;z-index:999999;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease;}
.product-modal.is-open{opacity:1;visibility:visible;pointer-events:auto;}
.product-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:saturate(120%) blur(6px);opacity:0;transition:opacity .28s ease;}
.product-modal.is-open .product-modal__backdrop{opacity:1;}
.product-modal__panel{position:relative;display:grid;grid-template-columns:1fr 1fr;height:100vh;background:#fff;transform:translateY(16px) scale(.985);opacity:0;animation:modalIn .32s cubic-bezier(.22,.61,.36,1) forwards;}
@keyframes modalIn{from{transform:translateY(16px) scale(.985);opacity:0;}to{transform:none;opacity:1;}}
@media (max-width:960px){.product-modal__panel{grid-template-columns:1fr;}}

.pm__media{position:relative;background:#000;}
.pm__media a{position:absolute;inset:0;display:block;}
.pm__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

.pm__detail{
  display: grid;
  grid-template-rows: auto 1fr auto;
  position:relative;
  height:100%;
  overflow: scroll;
}
.pm__content{
  overflow: auto;
min-height: 0;
}
.pm__header{padding:60px 60px 0;}
.pm__header h3{margin:0;font-size:28px;font-family:'Sackers Gothic Std',sans-serif;font-weight:300;}
#pmSlot{padding:0 80px 60px 60px;line-height:1.9;font-size:15px;color:#333;overflow:auto;}
.pm-free h4.pm-subttl{margin:0 0 12px;padding: 0;font-size:18px;font-family: "a-otf-ryumin-pr6n", serif;font-weight:700;}
.pm-free h5.pm-mini{margin:24px 0 8px;font-size:14px;font-weight:700;color:#666;}
.pm-free p{margin:0 0 16px;font-family: "a-otf-ryumin-pr6n", serif;}
.pm-list{margin:0;padding-left:1.2em;}
.pm-list li{margin:0 0 6px;}

/* buttons */
.pm-buttons{display:flex;gap:12px;margin:12px 0 16px;flex-wrap:wrap;}
.pm-btn{display:inline-block;border:none;border-radius:999px;padding:10px 16px;font-size:14px;text-decoration:none;transition:.15s;background: #000;color: #fff;}
.pm-btn:hover{background:#b9921a;color:#fff;}
.pm-btn.primary{background:#b9921a;color:#fff;border-color:#111;}

/* thumb grid (RIGHT COLUMN) */
.pm-thumbgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:8px 0 16px;}
.pm-thumbgrid figure{margin:0;}
.pm-thumbgrid a{display:block;}
.pm-thumbgrid img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.pm-thumbgrid figcaption{font-size:12px;color:#666;margin-top:6px;}

/* arrows */
.pm__nav{position:absolute;inset:0;pointer-events:none;}
.pm__arrow{pointer-events:auto;position:absolute;top:50%;transform:translateY(-50%);width:60px;height:60%;border-radius:50%;background:none;border:none;display:grid;place-items:center;z-index: 9999;}
.pm__arrow::before{content:"";width:10px;height:10px;border-top:2px solid #333;border-right:2px solid #333;display:block;transform:rotate(225deg);}
.pm__arrow[data-next]::before{transform:rotate(45deg);}
.pm__media .pm__arrow[data-prev]{left:16px;}
.pm__detail .pm__arrow[data-next]{right:16px;}

/* footer prev/next buttons */
.pm__footer{position:absolute;right:24px;bottom:20px;display:flex;gap:8px;}
.pm__footer .pm__btn{border:1px solid var(--fg);border-radius:28px;padding:10px 14px;font-size:14px;background:#fff;}

.pm__close{position:absolute;top:16px;right:24px;z-index:20;width:44px;height:44px;background:#fff;font-size:20px;border:none;}

@media (max-width:960px){
  #pmSlot{padding:20px 20px 100px;}
  .pm__footer{right:16px;bottom:16px;}
  .pm__detail .pm__arrow[data-next]{right:10px;}
  .pm__media .pm__arrow[data-prev]{left:10px;}
}
body.-lock{overflow:hidden;touch-action:none;}

/*category-sp*/
@media (max-width:1120px){
    .category {
    padding: 20px 60px;
  }
}
@media (max-width:768px){
  .category {
    padding: 0 0 0 20px;
  }
  .category__grid {
    display: flex;
    overflow-x: scroll;
  }
  .card{
    overflow: unset;
  }
  .card__media {
    aspect-ratio: 1 / 1;
  }
  :root{
    --card-w: 76vw;
  }

  .category__grid{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    grid-template-columns: unset !important;
  }

  .category__grid > .card{
    flex: 0 0 var(--card-w) !important;
    width: var(--card-w) !important;
    min-width: var(--card-w) !important;
    max-width: none !important;
    scroll-snap-align: start;
  }

  .card__media{ aspect-ratio: 4 / 3; }
  .card__body{ padding: 10px; }
  .card__number{ top: 10px; height: 24px; padding-left: 10px; }
  .card__name{ margin: 6px 0 0 46px; font-size: 14px; }
  .card__cta{ font-size: 12px; gap: 6px; }

  .category__grid{ scrollbar-width: none; }
  .category__grid::-webkit-scrollbar{ display: none; }

  .product-modal .product-modal__panel{
    grid-template-columns: 1fr !important;
    height: 100vh;
  }
  /*
  @supports (height: 100svh){
    .product-modal .product-modal__panel{ height: 100svh; }
  }*/
  .pm__media{
    height: 40svh;
    min-height: 260px;
    background: #000;
    position: relative;
  }
  .pm__media img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit: cover;
  }

  .pm__detail{
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
    position: relative !important;
    min-height: 0 !important; min-width: 0 !important;
    overflow: visible !important;
  }

  .pm__header{
    padding: 16px 30px 0 !important;
  }
  .pm__header h3{
    font-size: clamp(18px, 5.2vw, 22px);
  }

  .pm__content{
    padding: 0 30px 60px 33px!important;
    overflow: auto !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch;
  }
  .pm-free h4.pm-subttl {
    font-size: 13px;
    font-weight: 300;
    line-height: 1rem;
    margin: 0 0 12px 2px;
  }
  .pm-free p {
    font-size: 14px;
    line-height: 1.5rem;
  }

  .pm__footer{
    position: static !important;
    display: flex; gap: 10px; justify-content: flex-end;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom)) !important;
  }
  .pm__footer .pm__btn{
    padding: 10px 14px; font-size: 14px;
  }

  .pm__close{
    text-shadow: 4px 0px 17px rgba(0, 0, 0, 0.67);
    top: -250px;
    right: 10px;
    width: 44px; height: 44px;
    background: none;
    color: #fff;
  }

  .pm__media .pm__arrow[data-prev]{
    left: 0; top: 125%;
    width: 44px; height: 44px;
    border-radius: 999px;
  }
  .pm__detail .pm__arrow[data-next]{
    position: absolute !important;
    right: 10px; top: 18%;
    width: 44px; height: 44px;
    border-radius: 999px;
  }

  .pm-thumbgrid{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    content-visibility: auto;
    contain-intrinsic-size: 240px;
  }
  .pm-thumbgrid img{
    width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  }
  .pm-thumbgrid figcaption{ font-size: 12px; }
}

/*arrow調整*/

.product-modal__panel {
  position: relative;
}

.pm__arrows {
  position: absolute;
  left: 0;
  right: 0;
  top: 40vh;
  pointer-events: none;
  z-index: 50;
}

.pm__arrows .pm__arrow {
  position: absolute;
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.pm__arrows .pm__arrow[data-prev] {
  left: 12px;
}

.pm__arrows .pm__arrow[data-next] {
  right: 12px;
}

.pm__arrows .pm__arrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  display: block;
}
.pm__arrows .pm__arrow[data-prev]::before {
  transform: rotate(225deg);
}
.pm__arrows .pm__arrow[data-next]::before {
  transform: rotate(45deg);
}



@media (max-width:768px){
  .pm__arrows {
    top: 50vh;
  }
  .pm__arrows .pm__arrow {
    width: 40px;
    height: 40px;
  }
  .pm__arrows .pm__arrow[data-prev] {
    left: 0;
  }
  .pm__arrows .pm__arrow[data-next] {
    right: 8px;
  }
}





/* space-design */
.space-design {
  position: relative;
  z-index: 5;
  padding: 60px 160px 0;
  background-color: #b9921a;
}

.space-design__container {
  margin-inline: auto;
}

.space-design__heading {
  margin-bottom: clamp(16px, 3vw, 28px);
}
.space-design__heading h2 {
  font-size: clamp(22px, 3.6vw, 32px);
  font-family: 'Sackers Gothic Std', "Sackers Gothic", sans-serif;
  color: #fff;
  line-height: 1.2;
  letter-spacing: .02em;
  font-weight: 300;
}
.space-design__heading p {
  color: #fff;
  font-family: "a-otf-ryumin-pr6n", serif;
  font-size: 13px;
}
.space-design__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2.4vw, 24px);
  }
@media (max-width: 1120px){
.space-design{
  padding: 40px 60px;
}
}
@media (max-width: 768px) {
  .space-design__grid { grid-template-columns: 1fr; }
}

/* Card */
.space-design__card {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  outline: none;
  background: #f5f5f5;
  isolation: isolate;
}
  .space-design__figure {
    position: relative;
    width: 100%;
    aspect-ratio: 8 / 3;
    margin: 0;
  }
.space-design__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .8s ease;
}

/* Overlay */
.space-design__overlay {
  pointer-events: none;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end start;
  padding: clamp(12px, 2vw, 20px);
  background: linear-gradient(
    to top,
    rgba(0,0,0,.38) 0%,
    rgba(0,0,0,.16) 38%,
    rgba(0,0,0,0) 100%
  );
  opacity: .9;
  transition: opacity .3s ease;
}

.space-design__overlay__inner {
  color: #fff;
  display: grid;
  gap: 6px;
}

.space-design__label {
  font-size: clamp(12px, 1.8vw, 14px);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .95;
}
.space-design__cta {
  display: inline-block;
  font-size: clamp(14px, 2.4vw, 16px);
  line-height: 1.2;
  padding: 10px 14px;
  border-radius: 999px;
  transform: translateY(0);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

/* Hover / Focus */
.space-design__card:hover .space-design__figure img,
.space-design__card:focus-visible .space-design__figure img {
  transform: scale(1.04);
}
.space-design__card:hover .space-design__cta,
.space-design__card:focus-visible .space-design__cta {
  transform: translateY(-2px);
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.9);
}
.space-design__card:hover .space-design__overlay,
.space-design__card:focus-visible .space-design__overlay {
  opacity: 1;
}

.space-design__card:focus-visible {
  box-shadow: 0 0 0 3px rgba(0,0,0,.08), 0 0 0 6px rgba(0,0,0,.1);
}

/*  Modal content */
.modal__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: start;
  }
.modal__media img {
  width: 100%;
  height: auto;
  display: block;
}
.modal__body .modal__title {
  font-size: 20px;
  line-height: 1.3;
  margin: 6px 0 12px;
}
  .modal__body .modal__lead {
    font-size: 16px;
    font-family: "a-otf-ryumin-pr6n", serif;
    line-height: 1.9;
    color: #111;
    margin: 0 0 12px;
  }
.modal__body .modal__desc {
  font-size: clamp(14px, 2.2vw, 16px);
  line-height: 1.9;
  letter-spacing: .02em;
  color: #333;
}

@media (max-width: 980px) {
  .modal__content {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .space-design__figure img {
    transition: none;
  }
  .space-design__cta {
    transition: none;
  }
}
  /* ===============================
     Modal BASE styles (Self-contained)
     =============================== */
  .modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,.55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s ease;
  }
  .modal[aria-hidden="false"],
  .modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .modal__backdrop { position: absolute; inset: 0; }

  /* Bigger modal */
  .modal__dialog {
    position: relative;
    width: min(1280px, 96%);
    max-height: 92vh;
    overflow: auto;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    padding: clamp(18px, 2.0vw, 32px);
    transform: translateY(8px);
    transition: transform .28s ease;
  }
  .modal[aria-hidden="false"] .modal__dialog,
  .modal.is-open .modal__dialog { transform: translateY(0); }

  body.is-modal-open { overflow: hidden; }

  /* Close button (×) */
  .modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
  }
  .modal__close::before,
  .modal__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    background: #333;
    transform-origin: center;
  }
  .modal__close::before { transform: translate(-50%,-50%) rotate(45deg); }
  .modal__close::after  { transform: translate(-50%,-50%) rotate(-45deg); }

  /* Nav arrows */
  .modal__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: unset;
    border: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
  }
  .modal__nav::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
  }
  .modal__nav--prev { left: 10px; }
  .modal__nav--prev::before { transform: rotate(-135deg); }
  .modal__nav--next { right: 10px; }
  .modal__nav--next::before { transform: rotate(45deg); }

  .modal__nav:focus-visible,
  .modal__close:focus-visible {
    outline: 3px solid rgba(0,0,0,.25);
    outline-offset: 2px;
  }

  /* ===============================
     Modal content layout (TEXT HEAVY)
     =============================== */

  .modal__media img {
    width: 100%;
    height: auto;
    display: block;
  }
  .modal__body {
    max-width: 64ch;
  }
  .modal__body .modal__eyebrow {
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #888;
    margin: 2px 0 8px;
  }
  .modal__body ul {
    margin: 14px 0 0 1.2em;
    padding: 0;
  }
  .modal__body li {
    margin: .3em 0;
  }

  @media (max-width: 980px) {
    .modal__content { grid-template-columns: 1fr; }
    .modal__nav { width: 44px; height: 44px; }
    .modal__body { max-width: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .space-design__figure img, .space-design__cta { transition: none; }
  }
/*space-design-sp*/
@media (min-width: 981px) {
  .modal__dialog {
    padding-left: calc(clamp(18px, 1vw, 32px) + 32px);
    padding-right: calc(clamp(18px, 1vw, 32px) + 32px);
  }
  .modal__nav { z-index: 2; }
  .modal__nav--prev { left: 4px; }
  .modal__nav--next { right: 4px; }
}

  @media (max-width: 768px){
    .space-design {
      z-index: 99;
      padding: 60px 20px 0;
    }
    .space-design__heading h2 {
    text-align: center;
    }
    .modal__body .modal__lead {
    font-size: 14px;
    }
    .modal__dialog {
    width: 90%;
    max-height: 80vh;
    padding: 30px 30px;
    }
    .modal__close{
      top: 0;
      right: 0;
      background: unset;
    }
    .modal__close::before, .modal__close::after {
    width: 15px;
    }
    .modal__nav--prev {
      left: 0;
    }
  }

/*limited*/
.limited{
  position: relative;
  z-index: 4;
  padding: 60px 60px 120px;
  background-color: #b9921a;
}
.limited h3{
  text-align: center;
  font-size:40px;
  font-family: 'Sackers Gothic Std', "Sackers Gothic", sans-serif;
  font-weight: 300;
  color: #fff;
}
.limited_wrapper{
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
}
.limited_wrapper div{
  width: 260px;
  height: auto;
}
.limited_wrapper div img{
  width: 100%;
}

:root{
  --ddm-z:100000;
  --ddm-overlay:rgba(0,0,0,.48);
  --ddm-bg:#fff;
  --ddm-radius:16px;
  --ddm-shadow:0 20px 60px rgba(0,0,0,.25);
  --ddm-maxw:1080px;
}

.ddp *{ box-sizing:border-box }
.ddp .ddp__container{
  position: relative;
  z-index: 5;
  padding:100px 60px;
  background-color: #b9921a;
}
.ddp .ddp__h{
  margin:0 0 16px;
  text-align: center;
  color: #fff;
  font-size: 3vw;
  font-family: 'Sackers Gothic Std', "Sackers Gothic", sans-serif;
  font-weight: 300;
}

.ddp .ddp__lead{ color:#555; margin:0 0 28px }

/* Grid: 12 items = 6 x 2 (responsive) */
.ddp .grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:20px;
}
@media (max-width:1200px){ .ddp .grid{grid-template-columns:repeat(4, minmax(0,1fr));} }
@media (max-width:900px){ .ddp .grid{grid-template-columns:repeat(3, minmax(0,1fr));} }
@media (max-width:640px){ .ddp .grid{grid-template-columns:repeat(2, minmax(0,1fr));} }

.ddp .grid { align-items: stretch; } 
.ddp .card { height: 100%; display: flex; flex-direction: column; }

.ddp .card__media { aspect-ratio: 1/1; }
.ddp .card__body  { flex: 1; display: flex; flex-direction: column; gap: 8px; }

.ddp .card__title { line-height: 1.4; }
.ddp .card__action { margin-top: auto; } 

/* Card */
.ddp .card{
  overflow:hidden;
  background:#fff;
  transition:transform .18s ease, box-shadow .18s ease;
}
.ddp .card:focus-within, .ddp .card:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.08); }
.ddp .card__media{ display:block; aspect-ratio:1/1; background:#f6f6f6; overflow:hidden; }
.ddp .card__media img{ width:100%; height:100%; display:block; object-fit:cover; }
.ddp .card__body{ padding:12px 14px 14px }
.ddp .card__title{
    font-size:1vw;
    margin:0 0 8px;
    line-height:1.4;
    letter-spacing: 0.6;
    font-family: "a-otf-ryumin-pr6n", serif;
}
.ddp .card__action{
  display:inline-block;
  font-size:13px;
  padding: 8px 0;
  color: #999;
  text-decoration:none;
  text-align: right;
  cursor:pointer;
}
.ddp .card__action span{
  margin:0 4px 0 0;
}


/* Body lock when modal open */
.body--lock{ overflow:hidden; padding-right:var(--ddm-pr,0px) }

/* Modal */
.ddm[hidden]{ display:none !important }
.ddm{ position:fixed; inset:0; z-index:var(--ddm-z); display:grid; align-items:center; }
.ddm__overlay{ position:absolute; inset:0; background:var(--ddm-overlay); opacity:0; transition:opacity .24s ease; }
.ddm__panel{
  position:relative; margin-inline:auto;
  width:min(96vw,var(--ddm-maxw)); max-height:min(90vh,980px);
  background:var(--ddm-bg); box-shadow:var(--ddm-shadow);
  overflow:hidden; display:flex; flex-direction:column;
  transform:translateY(16px) scale(.985); opacity:0;
  transition: transform .36s cubic-bezier(.22,.61,.36,1), opacity .24s ease;
}
.ddm.is-open .ddm__overlay{ opacity:1 }
.ddm.is-open .ddm__panel{ transform:translateY(0) scale(1); opacity:1 }
.ddm__close{
  position:absolute; top:10px; right:10px;
  inline-size:40px; block-size:40px;
  border:none; background:transparent; font-size:28px; line-height:1;
  border-radius:999px; cursor:pointer;
}

/* Modal content layout */
.ddm__layout{
  display:grid;
  grid-template-columns: 480px 1fr;
  gap:32px;
  padding:28px 32px 32px 32px;
  align-items:start;
  overflow:auto;
}
@media (max-width:920px){
  .ddm__layout{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 30px 30 28px;
    gap: 10px;
  }
}
.ddm__media{
  width:480px;
  height:480px;
  padding: 0 0 0 1vw;
  overflow:hidden;
  font-family: "a-otf-ryumin-pr6n", serif;
}
.ddm__media img{ width:100%; height:100%; display:block; object-fit:cover; }
/* right column */
.ddm__title{
  margin:0 0 6px;
  font-size:1.6vw;
  font-family: "a-otf-ryumin-pr6n", serif;
}
.ddm_text{
  padding: 20px 20px 0 10px;
}
.ddm__desc{
  margin:0 0 14px;
  color:#444;
  line-height: 1.8rem;
  font-family: "a-otf-ryumin-pr6n", serif;
}
.ddm__spec{ margin:0 0 16px; padding-left:18px;list-style: disc; }
.ddm__spec li{list-style: disc;}
.ddm__actions{ display:flex; gap:12px; flex-wrap:wrap; }
.ddm__cta, .ddm__ghost{
  appearance:none; border:1px solid #000; background:#000; color:#fff;
  padding:10px 16px; border-radius:999px; cursor:pointer;
}
.ddm__ghost{ background:transparent; color:#000; }

/* side arrow*/
.ddm__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inline-size: 44px;
  block-size: 44px;
  border: none;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.ddm__nav::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transform: rotate(45deg);
}

.ddm__nav--prev::before {
  transform: rotate(225deg);
}

.ddm__nav--next::before {
  transform: rotate(45deg);
}
/*
.ddm__nav:hover {
  background: #f8f8f8;
}*/
.ddm__nav svg{ width:22px; height:22px; display:block; }
.ddm__nav--prev{ left:8px; }
.ddm__nav--next{ right:16px; }
.ddm__nav:focus-visible{ outline:2px solid #000; outline-offset:2px; }

/* Instant swap (no animation when moving prev/next) */
.ddm--instant .ddm__panel, .ddm--instant .ddm__overlay { transition: none !important; }


/*limited-sp*/
@media (max-width: 768px){
  .ddp .grid {
    gap:10px;
  }
  .ddp .ddp__container {
    padding: 60px 20px;
  }
  .ddp .ddp__h {
  font-size: 6vw;
  }
  .ddp .card__title {
    font-size: 3.8vw;
    font-weight: 300;
  }
  .ddm__panel{
    width: 90%;
    max-height: 80vh;
  }
  .ddm__media {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    background: #fff;
    overflow: unset;
  }
  .ddm__media img{
    height: auto;
  }
  .ddm__desc {
    line-height: 1.4rem;
  }
  .ddm_text {
    padding: 0;
    overflow-y: scroll;
  }
  .ddm__title {
    font-size: 18px;
  }
  .ddm__spec{
    list-style: disc;
  }
  .ddm__nav--prev{
    left: -5px;
  }
  .ddm__nav--next{
    right: -5px;
  }
  .ddm__close{
    top: 0;
    right: 0;
  }
}

/*event*/
#event{
  position: relative;
  z-index: 5;
  padding: 100px 0;
  margin: 0 60px;
  background-color: #fff;
  font-family: 'Sackers Gothic Std', "Sackers Gothic", sans-serif;
  font-style: normal;
  font-weight: 300;
  letter-spacing: -0.02em;
}
#event h3{
  text-align: right;
  font-size: 36px;
  font-weight: 300;
}
.event-link {
    display: flex;
    width: 60vw;
    padding: 20px 20px 20px 30px;
    text-decoration: none;
    align-items: center;
    font-size: 16px;
    color: #252525;
    border-top: solid #000 0.1px;
    -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all  0.3s ease;
}

.event-link:where(a) {
  opacity: 1;
}
.event-link:hover{
  background-color: #b9921a;
}
.event-link:hover .event-name p {
  color: #fff;
}
.event-link:hover .date {
  color: #fff;
}

.event-link:hover .arrow::before,
.event-link:hover .arrow::after {
  background-color: #fff;
}
.event_wrapper{
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}
.event_wrapper img{
  width: 20%;
  margin: 0 44% 30px 0;
}
.event-link .date-wrap {
  align-items: center;
  display: flex;
  width: 30%;
}
.event-link .event-icon.list {
  border-radius: 50%;
  height: 12px;
  width: 12px;
  background-color: #b9921a;
}
.even-link .event-icon {
  background-color: #fff;
}
.event-link .date {
  margin: 0 0 0 20px;
}
.event-link .date.no-icon {
  font-family: "Noto Serif JP",serif;
  font-optical-sizing: auto;
  font-size: 3.0666666667vw;
  font-style: normal;
  font-weight: 500;
  margin-left: 0;
  width: 100%;
}
.event-link .event-name {
  overflow: hidden;
  width: 48vw;
}
.event-link .event-name p {
  width: 100%;
  letter-spacing: 0.5;
  font-family: "a-otf-ryumin-pr6n", serif;
}
.event-link .coming {
  margin: 0 auto;
  padding-right: 6vw;
  text-align: center;
}
/*event-sp*/
@media (max-width: 768px){
  #event{
    margin: 0;
    padding: 60px 0 0;
  }
  #event h3 {
    margin: 0 20px 30px 0;
    font-size: 30px;
    line-height: 2.4rem;
    }
  .event_wrapper img {
    width: 40%;
  }
  .event-link{
    justify-content: space-evenly;
    width: 90%;
    gap: 6px;
    padding: 20px 10px;
  }
  .event-link .date {
    margin: 0 0 0 6px;
}
}


/*arrow*/
.arrow {
  position: relative;
  display: inline-block;
  width: 13px;
  height: 25px;
}

.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 10px;
  height: 0.5px;
  border-radius: 9999px;
  background-color: #000000;
  transform-origin: calc(100% - 0.5px) 50%;
}

.arrow::before {
  transform: rotate(45deg);
}

.arrow::after {
  transform: rotate(-45deg);
}

/*info*/
.info{
  position: relative;
  z-index: 6;
  padding: 100px 0;
  text-align: center;
  background-color: #fff;
}
.info h4{
  font-size: 22px;
  letter-spacing: 1.5;
  font-family: "a-otf-ryumin-pr6n", serif;
}
.info p{
  margin-bottom: 7px;
  letter-spacing: 0.5;
  font-family: "a-otf-ryumin-pr6n", serif;
}
.info img{
  width: 90vw;
  height: 370px;
  object-fit: cover;
  margin: 0 auto;
}
/*info-sp*/
@media (max-width: 768px){
  .info{
    padding: 60px 0;
  }
  .info img{
    width: 100vw;
    height: auto;
        aspect-ratio: 16 / 9;
  }
}
/*cms*/
.pane-main {
    overflow: visible;
}
.pane-footer .block-footer-content {
    display: none;
}