/* youbrideの特徴セクション内で使う円形のページ内リンク(Figma: outline-button)
 * SP: 100px / PC: 140px。1080px以上でPCへ切り替える。 */
.guest-outline-button {
  position: relative;
  display: flex;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0px;
  overflow: hidden;
  padding: 12px 8px 28px;
  border-radius: 80px;
  background-color: var(--guest-color-background-pale-orange);
  color: var(--guest-color-text-mid-brown);
  font-family: var(--guest-font-family);
  font-size: var(--guest-font-size-xs);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-heading);
  text-align: center;
  text-decoration: none;
  word-break: break-word;
  transition: box-shadow 0.3s ease;
}

.guest-outline-button:hover {
  box-shadow: 0 0 16px rgba(248, 150, 65, 0.3);
}

.guest-outline-button__lead,
.guest-outline-button__text {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  font-size: var(--guest-font-size-xs);
  line-height: var(--guest-line-height-heading);
}

.guest-outline-button__arrow {
  position: absolute;
  bottom: -46px;
  left: 50%;
  display: flex;
  width: 72px;
  height: 72px;
  box-sizing: border-box;
  justify-content: center;
  padding: 4px;
  border-radius: 80px;
  background-color: var(--color-orange-200);
  transform: translateX(-50%);
}

.guest-outline-button__arrow::before {
  width: 7px;
  height: 7px;
  margin-top: 3px;
  border-right: 2px solid var(--color-neutral-0);
  border-bottom: 2px solid var(--color-neutral-0);
  content: "";
  transform: rotate(45deg);
}

.guest-outline-button--yellow .guest-outline-button__arrow {
  background-color: var(--color-yellow-300);
}

.guest-outline-button--green .guest-outline-button__arrow {
  background-color: var(--color-green-200);
}

@media (min-width: 1080px) {
  .guest-outline-button {
    width: 140px;
    height: 140px;
    padding-top: 20px;
  }

  .guest-outline-button__lead,
  .guest-outline-button__text {
    font-size: var(--guest-font-size-base);
  }

  .guest-outline-button__arrow {
    bottom: -62px;
    width: 92px;
    height: 92px;
  }

  .guest-outline-button__arrow::before {
    width: 8px;
    height: 8px;
    margin-top: 4px;
  }
}