@charset "UTF-8";
svg {
  display: block;
  max-inline-size: var(--ratio-full);
}

/* SVGアンカーはOS固有outlineを出さず 各SVGの規定フォーカス表示だけを使用する */
svg a:focus-visible {
  outline: none;
}

.p-floormap-index__map {
  --floormap-main-aspect-ratio: 1256 / 700;
  inline-size: var(--ratio-full);
  max-inline-size: var(--grid-desktop-width);
  margin: var(--space-0) auto var(--space-32);
  background-color: var(--semantic-background-base);
}

.c-floormap__canvas {
  display: block;
  inline-size: var(--ratio-full, 100%);
  block-size: auto;
  aspect-ratio: var(--floormap-main-aspect-ratio, 1256/700);
  border: var(--space-0, 0px);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

.c-floormap__area--lucua {
  --floormap-area-fill: var(--semantic-brand-lucua-subtle);
  --floormap-area-fill-interactive: var(--semantic-brand-lucua);
}

.c-floormap__area--1100 {
  --floormap-area-fill: var(--semantic-brand-lucua-1100-subtle);
  --floormap-area-fill-interactive: var(--semantic-brand-lucua-1100);
}

.c-floormap__area--south {
  --floormap-area-fill: var(--semantic-brand-lucua-south-subtle);
  --floormap-area-fill-interactive: var(--semantic-brand-lucua-south);
}

.c-floormap__area--dining {
  --floormap-area-fill: var(--semantic-surface-floormap-neutral);
  --floormap-area-fill-interactive: var(--semantic-surface-floormap-neutral-interactive);
}

#floormap-side > :not(.c-floormap__area) {
  pointer-events: none;
}

.c-floormap__area {
  cursor: pointer;
}

.c-floormap__area-fill {
  color: var(--floormap-area-fill);
}

@media (width < 768px) {
  .c-floormap__area {
    pointer-events: none;
    cursor: default;
  }
  .c-floormap__area-fill {
    color: var(--floormap-area-fill-interactive);
  }
}
.c-floormap__area:is(:hover, :focus-visible, :active) .c-floormap__area-fill {
  color: var(--floormap-area-fill-interactive);
}

.c-floormap__area:focus-visible .c-floormap__target {
  stroke: var(--semantic-border-focus);
  stroke-width: var(--layout-focus-width);
  rx: var(--layout-focus-radius);
  ry: var(--layout-focus-radius);
  vector-effect: non-scaling-stroke;
}

@media (prefers-reduced-motion: no-preference) {
  .c-floormap__area-fill {
    transition: color var(--motion-duration, 300ms) var(--motion-easing, ease-out);
  }
}