/*
Theme Name: HORIZON Child
Template: horizon_tcd093
Description: HORIZON専用の子テーマです。カスタマイズ用。
Author:Do IT
*/

/* ここから下に独自のCSS（追従ボタンのスタイル等）を記述します */


/* --------------------------------------------------
   ヘッダー追従CVボタン カスタマイズ
   （PC:一行 / SP:アイコンのみ）
-------------------------------------------------- */

/* ■ 配置設定 */
.header-cta-wrapper {
    position: absolute;
    right: 90px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    display: flex;
    align-items: center;
}

/* ■ PC用ボタンデザイン */
.header-cta-btn {
    display: flex;
    flex-direction: row; /* 横並び */
    align-items: center;
    justify-content: center;
    
    /* カラー設定 */
    background: #84ad00;
    color: #fff !important;
    text-decoration: none !important;
    
    /* 形とサイズ */
    border-radius: 50px;
    padding: 0 25px; /* 横幅の余白 */
    height: 50px;    /* 高さを固定 */
    min-width: 180px;
    
    /* アニメーション */
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* ホバー時（PCのみ） */
.header-cta-btn:hover {
    background: #295900;
}

/* ■ アイコン設定 */
.cta-icon {
    font-size: 18px;
    margin-right: 8px; /* 文字との間隔 */
}

/* ■ テキスト設定 */
.cta-text {
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1; /* 高さズレ防止 */
}


/* --------------------------------------------------
   レスポンシブ対応（スマホ・タブレット時）
-------------------------------------------------- */
@media screen and (max-width: 900px) {
    
    /* ■ 配置調整 */
    .header-cta-wrapper {
        right: 70px;
    }

    /* ■ ボタンデザイン（スマホ用上書き：正円・アイコンのみ） */
    .header-cta-btn {
        padding: 0;
        min-width: auto;
        
        /* 正円設定 */
        width: 50px;
        height: 50px;
        border-radius: 50%;
        
        /* アニメーション無効化 */
        transition: none;
        box-shadow: none;
    }
    
    .header-cta-btn:hover {
        background: #84ad00;
    }

    /* ■ アイコン調整（中央に配置・少し大きく） */
    .cta-icon {
        margin-right: 0; /* マージン削除 */
        font-size: 22px; /* アイコンサイズアップ */
    }

    /* ■ テキストを非表示 */
    .cta-text {
        display: none;
    }
}