html {
  scroll-padding-top: var(--length-40);
}

/* アイコンボタン */
.icon-button {
  background-color: var(--color-secondary-20);
}

/* アンカーリンクナビ */
.anchors-nav {
  &::-webkit-scrollbar {
    display: none;
  }
}

/* 導入の流れ */
.procedure-item {

  &:not(:last-of-type)::after {
    content: '';
    background-color: var(--color-surface-95);
    width: var(--length-8);
    height: var(--length-8);
    position: absolute;
    right: var(---position-4);
    top: var(--position-1_2);
    rotate: var(--rotate-45);
    translate: var(--position-0) var(---position-1_2);
  }
}

/* よくある質問 */
.faq-details {

  &::details-content {
    transition: all var(--duration-150) allow-discrete;
    height: var(--length-0);
    opacity: var(--opacity-0);
    overflow: clip;
  }

  &[open]::details-content {
    opacity: var(--opacity-100);
    height: auto;
  }

  &[open] .faq-summary::after {
    rotate: var(---rotate-180);
    background-color: transparent;
    color: var(--color-secondary-20);
  }
}

.faq-summary {

  &::before {
    content: 'Q';
    font-family: var(--font-family-en);
    font-weight: var(--font-medium);
    font-size: var(--text-xl);
    line-height: var(--leading-8);
  }

  &::after {
    font-family: "Material Symbols Outlined";
    content: "\e313";
    font-size: var(--text-2xl);
    min-width: var(--length-10);
    height: var(--length-10);
    border-radius: var(--rounded-full);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    transition: all var(--duration-150);
    background-color: var(--color-secondary-20);
    color: var(--color-surface-100);
  }
}

/*  */
.sp-bottom-bar {
  transition: all var(--duration-150) allow-discrete;
}