.cta-appeal-word {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2) var(--spacing-1);
  font-size: var(--font-size-20);

  .item {
    display: inline-flex;
    padding-block: var(--spacing-2);
    padding-inline: var(--spacing-4);
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-full);
    border: var(--border-width-level-1) solid var(--semantic-stroke-tertiary);
    text-align: center;
    font-size: var(--font-size-16);
    line-height: var(--line-height-one);

    @media (40.1rem < width) {
      font-size: var(--font-size-18);
    }
  }

  .plus {
    position: relative;
    inline-size: 12px;
    block-size: 12px;

    &::before,
    &::after {
      content: "";
      position: absolute;
      inset-block-start: 50%;
      inset-inline-start: 50%;
      transform: translate(-50%, -50%);
      display: block;
      background-color: var(--primitive-chalk-blue-600);
    }

    &::before {
      inline-size: 3px;
      block-size: 100%;
    }

    &::after {
      inline-size: 100%;
      block-size: 3px;
    }
  }

  em {
    --semantic-text-promotion: #be0b00;
    color: var(--semantic-text-promotion);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-18);
    line-height: var(--line-height-one);

    @media (40.1rem < width) {
      font-size: var(--font-size-24);
    }

    sup {
      font-weight: var(--font-weight-normal);
    }

    .num {
      font-family: var(--font-family, Inter);
      font-size: var(--font-size-32);
      line-height: var(--line-height-one);

      @media (40.1rem < width) {
        font-size: var(--font-size-40);
      }
    }
  }
}

.before-side-nav .box-outline + .box-outline {
  margin-block-start: var(--spacing-8);

  @media (40.1rem < width) {
    margin-block-start: var(--spacing-12);
  }
}

.quote-start-box {
  /* Figma では 1120px のボックス内容に対し、CTA 2列ぶんの幅
     （ボタン420px×2 + 区切り線1px + 左右の余白 spacing-16×2）だけのカラムを中央寄せし、
     見出し・アピール文・CTA・下部リンクの左端をすべてボタン左端に揃えている */
  --ui-quote-start-box-content-inline-size: calc(
    420px * 2 + var(--spacing-16) * 2 + var(--border-width-level-1)
  );

  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  max-inline-size: var(--ui-quote-start-box-content-inline-size);
  margin-inline: auto;

  @media (40.1rem < width) {
    gap: var(--spacing-8);
  }

  > h2 {
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;

    @media (40.1rem < width) {
      font-size: var(--font-size-32);
    }
  }

  .appeal {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
  }

  .links ul {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);

    @media (40.1rem < width) {
      flex-direction: row;
      gap: var(--spacing-6);
    }
  }
}

.cta-choice {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);

  @media (70.75rem < width) {
    flex-direction: row;
    justify-content: center;
    gap: var(--spacing-16);
    padding-block: var(--spacing-5);
  }

  > div {
    display: flex;
    justify-content: center;

    @media (70.75rem < width) {
      flex: 0 1 420px;
    }
  }

  > div + div {
    border-block-start: var(--border-width-level-1) solid var(--primitive-chalk-blue-300);
    padding-block-start: var(--spacing-6);

    @media (70.75rem < width) {
      box-sizing: content-box;
      border-block-start: none;
      padding-block-start: 0;
      border-inline-start: var(--border-width-level-1) solid var(--primitive-chalk-blue-300);
      padding-inline-start: var(--spacing-16);
    }
  }

  .cta-button {
    --cta-button-block-size: 80px;

    inline-size: min(420px, 100%);

    > span {
      line-height: var(--line-height-sm);
    }
  }
}

.quote-resume-box {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);

  @media (70.75rem < width) {
    flex-direction: row;
    justify-content: center;
    gap: var(--spacing-16);
  }

  > section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);

    @media (70.75rem < width) {
      flex: 0 1 420px;
      gap: var(--spacing-8);
    }

    > h2 {
      font-size: var(--font-size-20);
      font-weight: var(--font-weight-bold);
      line-height: 1.3;

      @media (40.1rem < width) {
        font-size: var(--font-size-24);
      }
    }
  }

  > * + * {
    border-block-start: var(--border-width-level-1) solid var(--semantic-stroke-primary);
    padding-block-start: var(--spacing-6);

    @media (70.75rem < width) {
      box-sizing: content-box;
      border-block-start: none;
      padding-block-start: 0;
      border-inline-start: var(--border-width-level-1) solid var(--semantic-stroke-primary);
      padding-inline-start: var(--spacing-16);
    }
  }

  .cta-button {
    --cta-button-block-size: 80px;
    --cta-button-max-inline-size: min(420px, 100%);

    margin-inline: auto;

    > span {
      line-height: 1.3;
      text-align: center;

      small {
        display: block;
        font-size: var(--font-size-14);

        @media (40.1rem < width) {
          font-size: var(--font-size-16);
        }
      }
    }
  }
}

.cta-button[data-cta-color="lime"] {
  --ui-quote-cta-lime: #72a622;
  --cta-button-background: var(--ui-quote-cta-lime);

  @media (any-hover: hover) {
    &:hover {
      --cta-button-background: color-mix(in srgb, var(--ui-quote-cta-lime) 80%, var(--neutral-white));
    }
  }
}

.cta-button[data-cta-color="indigo"] {
  --cta-button-background: var(--primitive-indigo-500);

  @media (any-hover: hover) {
    &:hover {
      --cta-button-background: color-mix(
        in srgb,
        var(--primitive-indigo-500) 80%,
        var(--neutral-white)
      );
    }
  }
}

.quote-condition-table {
  th {
    text-align: center;

    @media (40.1rem < width) {
      inline-size: 50%;
    }
  }

  td {
    vertical-align: middle;

    &.center {
      text-align: center;
    }
  }

  tbody > tr:last-child > td:first-child:last-child {
    border-bottom-right-radius: 0;
  }

  tbody > tr:nth-last-child(2) > td[rowspan="2"]:last-child {
    border-bottom-right-radius: var(--ui-table-inner-radius);
  }

  .condition-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);

    /* SPのfigure横スクロール用に figure へ指定された white-space: nowrap を打ち消し、
       1カラム目のテキストだけ折り返す。継承したままだとテキストが折り返せず
       flex-shrink も効かないため、セル幅を超えて隣の列へはみ出す（Safari / Chrome 共通）。
       折り返しを許可すると table-layout: auto が列を min-content まで潰すので、
       幅を固定してテーブル全体の横スクロール幅は従来どおり保つ */
    inline-size: 13rem;
    white-space: normal;

    @media (40.1rem < width) {
      inline-size: auto;
    }

    img {
      inline-size: 48px;
      block-size: 48px;
      flex-shrink: 0;

      @media (40.1rem < width) {
        inline-size: 72px;
        block-size: 72px;
      }
    }

    p {
      line-height: var(--line-height-md);
    }

    .note-list {
      margin-block-start: var(--spacing-2);
    }
  }

  .phone-procedure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);

    .status {
      color: var(--semantic-text-positive);
      font-weight: var(--font-weight-bold);
    }

    a {
      display: inline-flex;
      align-items: center;
      gap: var(--spacing-1);
      text-decoration-color: var(--semantic-stroke-brand-primary);
      text-decoration-thickness: var(--border-width-level-1);
      text-underline-offset: 4px;

      &::before {
        content: "";
        display: block;
        inline-size: 20px;
        block-size: 20px;
        mask-image: var(--icon-telephone);
        mask-size: contain;
        mask-repeat: no-repeat;
        background-color: var(--semantic-fill-brand-primary);
      }

      > span {
        font-family: var(--font-family-en);
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-20);
        color: var(--semantic-text-brand-primary);
        line-height: var(--line-height-sm);
      }
    }

    .hours {
      font-size: var(--font-size-14);
    }
  }

  .not-available {
    --semantic-text-promotion: #be0b00;
    color: var(--semantic-text-promotion);
    font-weight: var(--font-weight-bold);
  }
}

.cta-area {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.estimate-phone-guide > p {
  flex-direction: column;
}