/* 料金表 扉前の案内札（ロココ金枠）v2 — 見本の札を左右別々に原寸比で使用。表示のみ・タップは扉へ素通し */
@font-face {
  font-family: "Noto Serif JP Guide";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/noto-serif-jp-guide-500.woff2") format("woff2");
}

/* 札の大きさ: 見本の「札幅 / 扉幅」= 1.94 に合わせる（扉幅 ≒ ステージ幅の 14.5%） */
#pricing-room {
  --dg-w-left: 28%;
  --dg-w-right: calc(28% * 389 / 509);
  --dg-anchor: 0.24; /* 札の下端 = ステージ高さ × この値（扉板の上端） */
}
@media (max-width: 768px) {
  #pricing-room {
    /* スマホは扉が小さいので読める最小幅を確保（比率は左右同じ） */
    --dg-w-left: max(28%, 158px);
    --dg-w-right: calc(max(28%, 158px) * 389 / 509);
    --dg-anchor: 0.34;
  }
}

#pricing-room .pricing-door-hint.door-guide {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  max-width: none;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: none;
  text-shadow: none;
  transform: none;
  isolation: isolate;
  pointer-events: none !important;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  transition: opacity 1.4s ease, visibility 1.4s ease;
}
#pricing-room .pricing-door-hint.door-guide.is-visible { transform: none; }
#pricing-room .pricing-door-hint.door-guide::before,
#pricing-room .pricing-door-hint.door-guide::after { content: none; display: none; }

/* 左右の札ごとの実測値（見本の札の幅・高さに対する %） */
#pricing-room .door-guide-left {
  width: var(--dg-w-left);
  --ar: 1018 / 424;
  --cx: 48.7%;
  --t-y: 36.45%; --t-fs: 7.3cqw; --t-ls: 0.233em;
  --r-y: 50.7%; --r-x: 15%; --r-w: 68.4%;
  --s-x: 49.6%; --s-y: 61.05%; --s-fs: 5.17cqw; --s-ls: 0.16em;
  --c-x: 49.35%; --c-y: 77.2%; --c-w: 6.8cqw; --c-h: 3.4cqw;
}
#pricing-room .door-guide-right {
  width: var(--dg-w-right);
  --ar: 778 / 420;
  --cx: 52.9%;
  --t-y: 39.27%; --t-fs: 8.9cqw; --t-ls: 0.14em; --t-ff: "palt" 1;
  --r-y: 53.1%; --r-x: 15.5%; --r-w: 73.4%;
  --s-x: 53.7%; --s-y: 63.8%; --s-fs: 6.5cqw; --s-ls: 0.15em;
  --c-x: 51.55%; --c-y: 80.7%; --c-w: 8.7cqw; --c-h: 4.35cqw;
}

#pricing-room .door-guide .dg-bob {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--ar);
  container-type: inline-size;
  animation: dgBob 4.6s ease-in-out infinite;
}
#pricing-room .door-guide-right .dg-bob { animation-delay: -2.3s; }

#pricing-room .door-guide .dg-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

#pricing-room .door-guide .dg-text {
  position: absolute;
  inset: 0;
  display: block;
  font-family: "Noto Serif JP Guide", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  font-weight: 500;
  white-space: nowrap;
}
#pricing-room .door-guide .dg-title,
#pricing-room .door-guide .dg-sub {
  position: absolute;
  left: var(--cx);
  display: block;
  line-height: 1;
  transform: translate(-50%, -50%);
}
#pricing-room .door-guide .dg-title {
  top: var(--t-y);
  font-size: var(--t-fs);
  letter-spacing: var(--t-ls);
  padding-left: var(--t-ls);
  color: #4a2412;
  font-feature-settings: var(--t-ff, normal);
}
#pricing-room .door-guide .dg-sub {
  left: var(--s-x, var(--cx));
  top: var(--s-y);
  font-size: var(--s-fs);
  letter-spacing: var(--s-ls);
  padding-left: var(--s-ls);
  color: #74532b;
}
#pricing-room .door-guide .dg-rule {
  position: absolute;
  top: var(--r-y);
  left: var(--r-x);
  width: var(--r-w);
  height: max(1px, 0.42cqw);
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(196, 150, 80, 0), #c49a58 14%, #d6ae6c 50%, #c49a58 86%, rgba(196, 150, 80, 0));
}
#pricing-room .door-guide .dg-chev {
  position: absolute;
  left: var(--c-x, var(--cx));
  top: var(--c-y);
  width: var(--c-w);
  height: var(--c-h);
  margin: 0;
  color: #c9974f;
  overflow: visible;
  transform: translate(-50%, -50%);
  animation: dgChev 2.2s ease-in-out infinite;
}

/* 金のキラキラ（見本の位置） */
#pricing-room .door-guide .dg-sparks { position: absolute; inset: 0; pointer-events: none; }
#pricing-room .door-guide .dg-spark {
  position: absolute;
  width: 6%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.45' stop-color='%23fff0c4'/%3E%3Cstop offset='1' stop-color='%23e2b45e'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M12 0C12.7 8 16 11.3 24 12 16 12.7 12.7 16 12 24 11.3 16 8 12.7 0 12 8 11.3 11.3 8 12 0Z' fill='url(%23g)'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 2px #fff6d8) drop-shadow(0 0 5px rgba(255, 206, 110, 0.85));
  animation: dgTwinkle 2.8s ease-in-out infinite;
}
#pricing-room .door-guide-left .dg-spark-1 { left: 0.4%;  top: 38.4%; width: 6.4%; animation-delay: -0.2s; }
#pricing-room .door-guide-left .dg-spark-2 { left: 2.2%;  top: 75.9%; width: 3.6%; animation-delay: -1.4s; }
#pricing-room .door-guide-left .dg-spark-3 { left: 27.1%; top: 18.2%; width: 4.4%; animation-delay: -2.1s; }
#pricing-room .door-guide-left .dg-spark-4 { left: 99.3%; top: 38.2%; width: 6.6%; animation-delay: -0.9s; }
#pricing-room .door-guide-left .dg-spark-5 { left: 97%;   top: 75.6%; width: 3.4%; animation-delay: -1.8s; }
#pricing-room .door-guide-left .dg-spark-6 { left: 87.5%; top: 16.3%; width: 4.4%; animation-delay: -2.5s; }
#pricing-room .door-guide-left .dg-spark-7 { left: 75%;   top: 99%;   width: 3.2%; animation-delay: -0.6s; }
#pricing-room .door-guide-right .dg-spark { animation-duration: 3.3s; }
#pricing-room .door-guide-right .dg-spark-1 { left: 0.3%;  top: 39.9%; width: 6%;   animation-delay: -0.4s; }
#pricing-room .door-guide-right .dg-spark-2 { left: 1.7%;  top: 78%;   width: 8%;   animation-delay: -1.6s; }
#pricing-room .door-guide-right .dg-spark-3 { left: 21%;   top: 17.4%; width: 5.4%; animation-delay: -2.4s; }
#pricing-room .door-guide-right .dg-spark-4 { left: 98.5%; top: 30%;   width: 5%;   animation-delay: -1.1s; }
#pricing-room .door-guide-right .dg-spark-5 { left: 96%;   top: 82%;   width: 4.4%; animation-delay: -2s; }
#pricing-room .door-guide-right .dg-spark-6 { left: 86%;   top: 12%;   width: 4%;   animation-delay: -2.8s; }
#pricing-room .door-guide-right .dg-spark-7 { left: 30%;   top: 99%;   width: 3.4%; animation-delay: -0.7s; }

@keyframes dgBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.2cqw); }
}
@keyframes dgChev {
  0%, 100% { opacity: 0.6; translate: 0 0; }
  50% { opacity: 1; translate: 0 0.5cqw; }
}
@keyframes dgTwinkle {
  0%, 100% { transform: scale(0.55) rotate(0deg); opacity: 0.35; }
  45% { transform: scale(1.05) rotate(12deg); opacity: 1; }
  60% { transform: scale(0.9) rotate(16deg); opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  #pricing-room .door-guide .dg-bob,
  #pricing-room .door-guide .dg-chev,
  #pricing-room .door-guide .dg-spark {
    animation: none !important;
  }
  #pricing-room .pricing-door-hint.door-guide { transition: none !important; }
}

#pricing-room.is-entering .pricing-door-hint.door-guide,
#pricing-room.is-inside .pricing-door-hint.door-guide,
#pricing-room.is-leaving .pricing-door-hint.door-guide,
#pricing-room.is-door-opening .pricing-door-hint.door-guide {
  transition-duration: 0.25s;
}