/**
 * Horizontal Buttons Block Styles
 */

/* WordPress標準ブロッククラスのリセット */
.wp-block-custom-blocks-horizontal-buttons {
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* 横並びボタンのメインコンテナ */
.horizontal-buttons-wrapper {
  display: flex;
  width: 100%;
  background-color: var(--custom-background-color-navy);
  margin: 0;
  padding: 0;
  justify-content: center;
  box-sizing: border-box;
}

/* 各ボタンコンテナ */
.horizontal-buttons-wrapper .button-container {
  display: flex;
  box-sizing: border-box;
}

/* PC（1024px以上） */
@media screen and (min-width: 1024px) {
  .horizontal-buttons-wrapper {
    gap: 64px;
    padding: 32px 100px;
  }

  .horizontal-buttons-wrapper .button-container {
    width: 354px;
  }
}

/* Tablet（768px〜1023px） */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .horizontal-buttons-wrapper {
    gap: 64px;
    padding: 32px 100px;
  }

  .horizontal-buttons-wrapper .button-container {
    width: 260px;
  }

  .horizontal-buttons-wrapper .button-container:hover .button-text {
    opacity: 0.6;
  }

  .horizontal-buttons-wrapper .button-container:hover .button-icon {
    transform: translateX(8px);
  }
}

/* SP（767px以下） */
@media screen and (max-width: 767px) {
  .horizontal-buttons-wrapper:not(.is-single) {
    gap: 0;
    width: 100%;
  }

  .horizontal-buttons-wrapper.is-single {
    gap: 0;
    width: 100%;
    padding: 20px 16px;
  }

  .horizontal-buttons-wrapper:not(.is-single) .button-container {
    flex: 1;
    width: 50%;
    min-width: inherit;
  }

  .horizontal-buttons-wrapper:not(.is-single) .button-container .custom-button {
    border: none !important;
    padding: 16px 0px;
  }

  .horizontal-buttons-wrapper:not(.is-single)
    .button-container:first-child
    .custom-button {
    background: var(--custom-background-color-navy);
    color: var(--custom-text-secondary);
  }

  .horizontal-buttons-wrapper:not(.is-single)
    .button-container:first-child
    .custom-button
    .button-icon
    svg
    path {
    fill: var(--custom-text-secondary) !important;
  }
}