/* PC表示時や通常時はラッパーをレイアウトに影響させない */
.pg_top_info_sp_wrap {
    display: contents;
}

.pg_top_info_btn_sp {
    display: none;
}

@media screen and (max-width: 560px) {

    .pg_top_info_head span {
    font-size: 18px;
    letter-spacing: 0em;
}


    /* メニューが閉じている（is_hiddenが存在する）ときのみ、親ラッパーを横並び3列の固定配置にする */
    .pg_top_info_sp_wrap:has(.pg_top_info.is_hidden) {
        display: flex !important;
        position: fixed !important;
        bottom: 16px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 92% !important;
        gap: 8px !important;
        z-index: 9999 !important;
        align-items: stretch !important;
        /* 高さを揃える */
    }

    /* 親ラッパーが効いているとき、中の pg_top_info（既存コード）を比率50%にし、自身の固定位置指定を無効化する */
    .pg_top_info_sp_wrap:has(.pg_top_info.is_hidden) .pg_top_info {
        flex: 2 !important;
        position: static !important;
        /* 既存の fixed などをリセット */
        width: auto !important;
        margin: 0 !important;
        transform: none !important;
        left: auto !important;
        bottom: auto !important;
    }

    /* 新しいWEB/電話予約ボタンをそれぞれ25%ずつの幅にする */
    .pg_top_info_sp_wrap:has(.pg_top_info.is_hidden) .pg_top_info_btn_sp {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;
        border-radius: 8px !important;
        background-color: #fff !important;
        padding: 3px 4px 4px 4px !important;
        box-sizing: border-box !important;
        height: auto !important;
    }

    /* 追加ボタンのカラー設定 */
    .pg_top_info_sp_wrap:has(.pg_top_info.is_hidden) .pg_top_info_btn_sp.__web {
        border: 2px solid #cd541f !important;
        color: #cd541f !important;
        text-decoration: none !important;
    }

    .pg_top_info_sp_wrap:has(.pg_top_info.is_hidden) .pg_top_info_btn_sp.__tel {
        border: 2px solid #fff !important;
        background-color: #514842 !important;
        /* 背景色 #514842 */
        color: #fff !important;
        /* 文字・SVGは白 */
        text-decoration: none !important;
    }

    /* 追加ボタンのSVGアイコンスタイル */
    .pg_top_info_sp_wrap:has(.pg_top_info.is_hidden) .pg_top_info_btn_sp svg {
        width: 24px !important;
        height: 24px !important;
        margin: 0 0 3px 0 !important;
    }

    /* SVGのpath色を親要素の文字色 (color) に強制同期させる */
    .pg_top_info_sp_wrap:has(.pg_top_info.is_hidden) .pg_top_info_btn_sp svg path {
        fill: currentColor !important;
    }

    /* 追加ボタンのテキストスタイル */
    .pg_top_info_sp_wrap:has(.pg_top_info.is_hidden) .pg_top_info_btn_sp span {
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-align: center !important;
        color: inherit !important;
    }
}