:root {
  --floating-inquiry-pc-gap: var(--space-sm);
  --floating-inquiry-pc-cluster-gap: var(--space-md);
  --floating-inquiry-pc-offset-right: 0;
  --floating-inquiry-pc-offset-top: 50%;
  --floating-inquiry-sp-offset-left: 0;
  --floating-inquiry-sp-offset-right: 0;
  --floating-inquiry-sp-offset-bottom: auto;
}

.c-floating-inquiry {
  position: fixed;
  inset: 0;
  z-index: var(--z-index-floating);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--duration-float) ease-in-out,
    visibility var(--duration-float) ease-in-out;
}

.c-floating-inquiry.is-visible {
  opacity: 1;
  visibility: visible;
}

.c-floating-inquiry__cluster {
  pointer-events: auto;
}

@media (min-width: 1024px) {
  .c-floating-inquiry {
    inset: 0;
    width: auto;
    height: auto;
  }

  .c-floating-inquiry__cluster {
    position: fixed;
    top: var(--floating-inquiry-pc-offset-top);
    right: var(--floating-inquiry-pc-offset-right);
    z-index: var(--z-index-floating);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--floating-inquiry-pc-cluster-gap);
    transform: translateY(calc(-50% + var(--floating-inquiry-pc-offset-top)));
  }

  .c-floating-inquiry__rails {
    display: flex;
    flex-direction: column;
    gap: var(--floating-inquiry-pc-gap);
    align-items: flex-end;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
}

@media (max-width: 1023px) {
  html.is-floating-inquiry-sp-active {
    padding-bottom: calc(var(--floating-inquiry-sp-pad, 0px) + env(safe-area-inset-bottom, 0px));
    background-color: var(--color-bg-alt);
  }

  .c-floating-inquiry {
    top: auto;
    right: var(--floating-inquiry-sp-offset-right);
    left: var(--floating-inquiry-sp-offset-left);
    width: 100%;
    height: auto;
    transform: none;
    pointer-events: none;
    bottom: calc(var(--layout-padding-inline-mobile) + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    padding: 0 var(--layout-padding-inline-mobile);
    box-sizing: border-box;
  }

  .c-floating-inquiry__cluster {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .c-floating-inquiry__rails {
    position: static;
    display: flex;
    flex-direction: row;
    gap: var(--space-sm);
    width: 100%;
    pointer-events: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
}

.p-top__fv-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  padding: var(--space-2xl) var(--layout-padding-inline-mobile);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  background: var(--color-primary-light);
}

@media (min-width: 1024px) {
  .p-top__fv-placeholder {
    padding: var(--space-2xl) var(--layout-padding-inline);
  }
}

.p-top__dev-scroll-placeholder {
  min-height: 200vh;
  padding: var(--space-2xl) var(--layout-padding-inline-mobile);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  background: var(--color-bg);
}

@media (min-width: 1024px) {
  .p-top__dev-scroll-placeholder {
    padding: var(--space-2xl) var(--layout-padding-inline);
  }
}