【Arkhe】ヘッダー右側に電話番号とお問い合わせリンクをつける

/**
 * ヘッダー
 */
add_action( 'arkhe_header_right_content', 'add_custom_header_right_content' );
function add_custom_header_right_content() {
    // インラインCSSを追加（ホバー時のスタイル）
    echo '
    <style>
        .custom-phone-box:hover {
            background-color: #666;
        }
        .custom-header-icon:hover {
            opacity: 0.7;
        }
    </style>
    ';

    echo '<div class="header-links-wrap" style="position: absolute; right: 0; top: 50%; transform: translateY(-50%);">';

    echo '<div class="header-phone-and-links" style="display: flex; align-items: center;">';

// 電話番号と案内文（縦並び）
echo '<div style="display: flex; flex-direction: column; align-items: flex-start; margin-right: 20px;">';

// 上に小さなテキストを追加（お気軽にご連絡ください。）
echo '<div class="contact-message" style="font-size: 12px; color: #333; margin-bottom: 3px;">お気軽にご連絡ください。</div>';

// 電話番号とアイコン（横並び・アイコン反転）
echo '<div style="display: flex; align-items: center; color: #000;">';
echo '<i class="fas fa-phone-alt" style="margin-right: 8px; color: #000; transform: scaleX(-1);"></i>';
echo '<span class="phone-number" style="font-size: 20px; color: #000;">000-0000-0000</span>';
echo '</div>';

echo '</div>';

    // お問い合わせアイコンとLINEアイコン（ホバー時にopacity変更）
    echo '<a href="リンク先URL" class="contact">';
    echo '<img class="custom-header-icon" src="画像のURL" alt="お問い合わせアイコン" style="vertical-align: middle; margin-right: 15px; width: 8vh; transition: opacity 0.3s;"></a>';
    echo '<a href="URL" target="_blank" class="line">';
    echo '<img class="custom-header-icon" src="画像のURL" alt="LINEアイコン" style="vertical-align: middle; width: 8vh; transition: opacity 0.3s;"></a>';
    
    echo '</div>';

    echo '</div>';
}