/* =======================================================
 * home-floating-cta.css
 * トップページ専用 フローティング CTA バー
 * ======================================================= */

/* PC / SP 共通 */
.home-floating-cta {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.home-floating-cta__sp-caption {
    display: none;
}

.home-floating-cta__button-text {
    display: none;
}

.home-floating-cta__tel-icon {
    display: none;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

@media only screen and (min-width: 896px) {
    .home-floating-cta {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 998;
        background: #fff;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.29);
        opacity: 0;
        transform: translateY(100%);
        transition: opacity 0.3s ease, transform 0.3s ease;
        pointer-events: none;
        will-change: transform, opacity;
    }

    .home-floating-cta.is-visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* フッター進入後はドキュメント座標で固定。
       JS が top をフッター直上に設定し、ブラウザがネイティブにスクロールするため
       スクロール／ラバーバンド時のフレーム遅延による揺れが発生しない */
    .home-floating-cta.is-anchored {
        position: absolute;
        bottom: auto;
    }

    .home-floating-cta__button-text--pc {
        display: inline;
    }

    .home-floating-cta__inner {
        max-width: 1121px;
        margin: 0 auto;
        padding: 16px 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 32px;
    }

    .home-floating-cta__lead {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: 0.12em;
        color: #222;
        white-space: nowrap;
    }

    .home-floating-cta__actions {
        display: flex;
        align-items: center;
        gap: 32px;
    }

    .home-floating-cta__tel {
        display: flex;
        align-items: flex-start;
        gap: 4px;
    }

    .home-floating-cta__tel-icon--pc {
        display: block;
        width: 28px;
        height: 28px;
    }

    .home-floating-cta__tel-body {
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
        justify-content: center;
    }

    .home-floating-cta__tel-number {
        font-size: 28px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.12em;
        color: #e6713d;
        text-decoration: none;
        white-space: nowrap;
    }

    .home-floating-cta__tel-number:hover {
        color: #e6713d;
        opacity: 0.85;
        text-decoration: none;
    }

    .home-floating-cta__tel-hours {
        font-size: 12px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0.12em;
        color: #222;
        white-space: nowrap;
    }

    .home-floating-cta__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 16px 24px;
        background: #fff;
        border: 1px solid #e6713d;
        border-radius: 24px;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.12em;
        color: #e6713d;
        text-decoration: none;
        white-space: nowrap;
    }

    .home-floating-cta__button:hover {
        color: #e6713d;
        background: #FDF1EC;
        text-decoration: none;
    }
}

/* SP 表示: 縦積みパネル（Figma 3082-18971） */
@media only screen and (max-width: 895px) {
    .home-floating-cta {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 998;
        background: #fff;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.29);
        opacity: 0;
        transform: translateY(100%);
        transition: opacity 0.3s ease, transform 0.3s ease;
        pointer-events: none;
        will-change: transform, opacity;
    }

    .home-floating-cta.is-visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .home-floating-cta.is-anchored {
        position: absolute;
        bottom: auto;
    }

    .home-floating-cta__inner {
        padding: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    /* PC 用 lead は SP では非表示、SP 用 caption を表示 */
    .home-floating-cta__lead {
        display: none;
    }

    .home-floating-cta__sp-caption {
        display: block;
        margin: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: 0.12em;
        color: #222;
        white-space: nowrap;
    }

    .home-floating-cta__button-text--sp {
        display: inline;
    }

    .home-floating-cta__actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: 100%;
    }

    .home-floating-cta__tel {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    .home-floating-cta__tel-icon--sp {
        display: block;
        width: 28px;
        height: 28px;
    }

    .home-floating-cta__tel-body {
        display: flex;
        align-items: center;
    }

    .home-floating-cta__tel-number {
        font-size: 28px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.12em;
        color: #e6713d;
        text-decoration: none;
        white-space: nowrap;
    }

    .home-floating-cta__tel-number:hover,
    .home-floating-cta__tel-number:focus {
        color: #e6713d;
        opacity: 0.85;
        text-decoration: none;
    }

    .home-floating-cta__tel-hours {
        display: none;
    }

    .home-floating-cta__button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 12px 24px;
        background: #fff;
        border: 1px solid #e6713d;
        border-radius: 24px;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: 0.12em;
        color: #e6713d;
        text-decoration: none;
        white-space: nowrap;
    }

    .home-floating-cta__button:hover,
    .home-floating-cta__button:focus {
        color: #e6713d;
        text-decoration: none;
        opacity: 0.85;
    }
}