/* CTA・共通ボタンと、それらを使用する画面の表示トークン。 */

/* トップ・CTA・投稿の戻るボタンが共有する寸法。 */
:is(.home, .diagnosis-page, .cta--full, .post-back) {
    --space-outer: var(--container-pad);
    --front-button-radius: 0.35rem;
    --front-transition-bg: color-mix(
        in srgb,
        var(--color-bg-sub) 50%,
        var(--color-bg-warm)
    );
}

.home .section-cta {
    position: relative;
}

:is(.home .site-main > .section-cta, .cta--full) {
    --section-bg: var(--color-main);
    color: var(--color-bg);
    --cta-cityscape-image: url('../images/home/cta-cityscape.webp');
    --cta-cityscape-overlay: linear-gradient(
        rgba(31, 58, 77, 0.7),
        rgba(31, 58, 77, 0.7)
    );
    padding-block: calc(var(--section-space) + 1.875rem);
    padding-inline: 2rem;
    background-image: var(--cta-cityscape-overlay), var(--cta-cityscape-image);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

:is(.home .top-section-title, .cta--full .top-section-title) {
    margin: 0 0 var(--section-heading-gap);
    font-size: var(--section-heading-size);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: left;
    overflow-wrap: anywhere;
}

/* TOP共通ボタン。配置のみ各セクションのクラスで調整する。 */
:is(.home, .diagnosis-page, .operation-page, :is(.cta--full, .post-back)) .top-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 3.75rem;
    min-width: 0;
    overflow-wrap: anywhere;
    max-width: 100%;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--button-border);
    background-color: var(--button-bg);
    color: var(--button-ink);
    border-radius: var(--front-button-radius);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

:is(.home, .diagnosis-page, .operation-page, :is(.cta--full, .post-back)) .top-button-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 20px;
}

.post-back .top-button.top-button-detail,
.home .column-more .top-button-detail,
.diagnosis-page .diagnosis-flow-cta {
    position: relative;
    display: flex;
    justify-content: space-between;
    max-width: 100%;
    padding-left: 24px;
    padding-right: 16px;
    margin-inline: auto;
}

:is(.home, .diagnosis-page, .operation-page, :is(.cta--full, .post-back)) .top-button-primary {
    --button-bg: var(--color-accent);
    --button-ink: var(--color-bg);
    --button-border: var(--color-accent);
    --circle-bg: var(--color-bg);
    --circle-ink: var(--color-accent);
    --button-hover-bg: var(--color-bg);
    --button-hover-ink: var(--color-accent);
    --circle-hover-bg: var(--color-accent);
    --circle-hover-ink: var(--color-bg);
}

:is(.home, .diagnosis-page, .operation-page, :is(.cta--full, .post-back)) :is(.top-button-secondary, .top-button-detail) {
    --button-bg: transparent;
    --button-ink: var(--color-accent);
    --button-border: var(--color-accent);
    --circle-bg: var(--color-accent);
    --circle-ink: var(--color-bg);
    --button-hover-bg: var(--color-accent);
    --button-hover-ink: var(--color-bg);
    --circle-hover-bg: var(--color-bg);
    --circle-hover-ink: var(--color-accent);
}

:is(.home, .operation-page, :is(.cta--full, .post-back)) .top-button[aria-disabled='true'] {
    opacity: 0.55;
    cursor: default;
}

:is(.home, .operation-page, :is(.cta--full, .post-back)) .pricing-service-entry[aria-disabled='true'] .top-button-detail {
    cursor: default;
}

:is(.home, .diagnosis-page, .operation-page, :is(.cta--full, .post-back)) .button-arrow {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
}

:is(.home, .operation-page, :is(.cta--full, .post-back)) .cta-actions .top-button-detail {
    --button-bg: var(--color-bg);
    --button-ink: var(--color-accent);
    --button-border: var(--color-accent);
    --circle-bg: var(--color-accent);
    --circle-ink: var(--color-bg);
    --button-hover-bg: var(--color-accent);
    --button-hover-ink: var(--color-bg);
    --circle-hover-bg: var(--color-bg);
    --circle-hover-ink: var(--color-accent);
}

/* 3パターンで反転処理を共有。濃色CTAは上の状態トークンで調整する。 */
@media (hover: hover) and (pointer: fine) {
    :is(.home, .operation-page, :is(.cta--full, .post-back)) .cta-actions .top-button:hover {
        border-color: var(--color-accent);
    }

:is(.home, .diagnosis-page, .operation-page, :is(.cta--full, .post-back)) .top-button[href]:hover,
    :is(.home, .operation-page, :is(.cta--full, .post-back)) button.top-button:not(:disabled):hover,
    :is(.home, .operation-page, :is(.cta--full, .post-back)) .top-button-detail:hover {
        background-color: var(--button-hover-bg);
        color: var(--button-hover-ink);
        --circle-bg: var(--circle-hover-bg);
        --circle-ink: var(--circle-hover-ink);
    }
}

/* 丸矢印は28px。SVGは円の文字色を継承する。 */
:is(.home, .diagnosis-page, .operation-page, :is(.cta--full, .post-back)) .button-arrow-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--circle-bg);
    border-radius: 50%;
    background-color: var(--circle-bg);
    color: var(--circle-ink);
    transition: background-color 0.2s ease, color 0.2s ease,
        border-color 0.2s ease;
}

:is(.home, .diagnosis-page, .operation-page, :is(.cta--full, .post-back)) .button-arrow-circle .button-arrow {
    width: 1.125rem;
    height: 1.125rem;
}

:is(.home, .diagnosis-page, .operation-page, :is(.cta--full, .post-back)) .button-chat {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
}

:is(.home, .operation-page, :is(.cta--full, .post-back)) .fv-cta {
    width: 100%;
    height: 100%;
}

:is(.home, .diagnosis-page, .operation-page, :is(.cta--full, .post-back)) .top-button:focus-visible,
:is(.home, .operation-page, :is(.cta--full, .post-back)) .pricing-service-entry[href]:focus-visible .top-button {
    outline: 2px solid var(--color-main);
    outline-offset: 4px;
}

/* 最終CTA：3つの目的別ボタン。 */
:is(.home, .operation-page, :is(.cta--full, .post-back)) .cta-box {
    width: 100%;
    max-width: 67.5rem;
    margin-inline: auto;
    padding: 4rem 2.5rem;
    border-radius: 8px;
    background-color: var(--color-bg-sub);
    color: var(--color-text);
}

:is(.home, .operation-page, :is(.cta--full, .post-back)) .cta-description {
    margin: 0;
    font-size: var(--front-body-size);
    line-height: 1.8;
    text-align: center;
}

:is(.home, .operation-page, :is(.cta--full, .post-back)) .cta-box > .top-section-title {
    margin-bottom: 1rem;
    text-align: center;
}

:is(.home, .operation-page, :is(.cta--full, .post-back)) .cta-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 1rem;
    width: 100%;
    margin-top: 2rem;
    justify-content: center;
}

:is(.home, .operation-page, :is(.cta--full, .post-back)) .cta-actions .top-button {
    width: 100%;
    max-width: 20rem;
    height: 100%;
    justify-self: center;
    flex-wrap: nowrap;
}

:is(.home, .operation-page, :is(.cta--full, .post-back)) .cta-action-icon {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
}

@media (max-width: 1199px) {
    :is(.home, .operation-page, :is(.cta--full, .post-back)) .cta-actions {
        grid-template-columns: minmax(0, 1fr);
        width: min(100%, 320px);
        margin-inline: auto;
        gap: 1rem;
    }
}

@media (max-width: 699px) {
    .post-back .top-button-detail {
        width: 100%;
    }
}

@media (max-width: 413px) {
    .home .pricing-card .pricing-cta,
    .diagnosis-page .diagnosis-price-panel .diagnosis-price-cta,
    .operation-page .operation-price .operation-price-cta,
    .operation-page .operation-google-grid article .top-button,
    .diagnosis-page .flow-after .diagnosis-flow-cta {
        justify-content: center;
    }

    .home .pricing-card .pricing-cta > :is(.button-chat, .button-arrow-circle),
    .diagnosis-page .diagnosis-price-panel .diagnosis-price-cta > :is(.button-chat, .button-arrow-circle),
    .operation-page .operation-price .operation-price-cta > :is(.button-chat, .button-arrow-circle),
    .operation-page .operation-google-grid article .top-button > :is(.button-chat, .button-arrow-circle),
    .diagnosis-page .flow-after .diagnosis-flow-cta > .button-arrow-circle {
        display: none;
    }

    .home .pricing-card .pricing-cta > span,
    .diagnosis-page .diagnosis-price-panel .diagnosis-price-cta > span,
    .operation-page .operation-price .operation-price-cta > span,
    .operation-page .operation-google-grid article .top-button > span,
    .diagnosis-page .flow-after .diagnosis-flow-cta > span,
    :is(.home, .operation-page, :is(.cta--full, .post-back)) .cta-actions > .top-button > span {
        white-space: nowrap;
    }

    :is(.home, .operation-page, :is(.cta--full, .post-back)) .cta-actions > .top-button {
        justify-content: center;
    }

    :is(.home, .operation-page, :is(.cta--full, .post-back)) .cta-actions > .top-button > :is(.cta-action-icon, .button-chat, .button-arrow-circle) {
        display: none;
    }
}

@media (max-width: 767px) {
    :is(.home .site-main > .section-cta, .cta--full) {
        padding-inline: 1rem;
    }

    :is(.home, .operation-page, :is(.cta--full, .post-back)) .cta-box {
        padding: 2.5rem 1rem;
    }

    :is(.home, .operation-page, :is(.cta--full, .post-back)) .cta-box > .top-section-title {
        margin-bottom: 0.75rem;
    }

    :is(.home, .operation-page, :is(.cta--full, .post-back)) .cta-actions {
        margin-top: 1.5rem;
        gap: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
:is(.home, .diagnosis-page, .operation-page, :is(.cta--full, .post-back)) .top-button,
:is(.home, .diagnosis-page, .operation-page, :is(.cta--full, .post-back)) .button-arrow-circle {
        transition: none;
    }
}

:is(.home .section-cta, .cta--full) .cta-box .top-section-title {
    color: var(--color-main);
}

:is(.home .section-cta, .cta--full) .top-button:focus-visible {
    outline-color: var(--color-accent);
}

@media (max-width: 767px) {
    .cta-heading-phrase {
        display: inline-block;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}