@charset "UTF-8";
/* =========================================================
 * mobile-cta.css — モバイル固定CTAバー（全ページ）
 *  読み込み：functions.php（wp_enqueue_scripts）
 *  HTML/JS：functions.php ain_mobile_cta_bar()
 * =======================================================*/

/* =========================================================
   モバイル固定CTAバー — デスクトップでは完全非表示
   ======================================================= */
#ain-mobile-cta {
    display: none;
}

@media (max-width: 767px) {

    /* コンテンツがバーに隠れないよう余白を確保 */
    body {
        padding-bottom: 64px !important;
    }

    /* バー本体 */
    #ain-mobile-cta {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        height: 64px;
        /* iOS ホームバー対応 */
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.18);
    }
    /* iOS ホームバーがある機種は本体高さを自動で拡張 */
    @supports (padding: env(safe-area-inset-bottom)) {
        #ain-mobile-cta {
            height: calc(64px + env(safe-area-inset-bottom));
        }
        body {
            padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
        }
    }

    /* 各ボタン共通 */
    .ain-mcta-btn {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-decoration: none;
        color: #fff;
        -webkit-tap-highlight-color: transparent;
        transition: filter 0.15s ease;
    }
    .ain-mcta-btn:active {
        filter: brightness(0.85);
    }

    /* 電話ボタン — サイトブランドカラー（赤） */
    .ain-mcta-tel {
        background-color: #c0392b;
    }

    /* LINEボタン — LINE公式カラー */
    .ain-mcta-line {
        background-color: #06C755;
    }

    /* アイコン */
    .ain-mcta-icon {
        flex-shrink: 0;
        line-height: 1;
    }
    .ain-mcta-icon svg {
        display: block;
    }

    /* ラベル */
    .ain-mcta-label {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1.3;
    }
    .ain-mcta-sub {
        font-size: 10px;
        opacity: 0.88;
        letter-spacing: 0.03em;
    }
    .ain-mcta-main {
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.02em;
    }

    /* =========================================================
       お問合せフォームがビューポートに入ったらバーを隠す
       （JS側で body に .ain-contact-visible を付与）
       ======================================================= */
    body.ain-contact-visible #ain-mobile-cta {
        display: none;
    }
    body.ain-contact-visible {
        padding-bottom: 0 !important;
    }

}