/**
 * CTAボタンのセンタリングとサイズ調整
 * 
 * 問題: CTAボタン画像が右に寄っている
 * 解決: センタリングして適切なサイズに調整
 */

/* ===============================================
   CTAボタンのセンタリング修正
   =============================================== */

/* CTAボタンのコンテナをセンタリング */
.lp-container .wp-block-ctwlpt-block-cta-a-01,
.lp-container .ctwlpt-block-cta-button-wrap {
    display: block;
    width: 100%;
    max-width: 1080px; /* コンテンツの最大幅 */
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center; /* 中央寄せを強制 */
}

/* CTAボタンのリンク要素 */
.lp-container .ctwlpt-block-cta-button-img {
    display: inline-block; /* インラインブロックで中央寄せ */
    max-width: 100%;
    width: auto; /* 画像の幅に合わせる */
    margin: 0 auto; /* 中央寄せ */
}

/* CTAボタンの画像 */
.lp-container .ctwlpt-block-cta-button-img img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
}

/* ===============================================
   PC版CTAボタンのサイズ調整
   =============================================== */

/* PC専用CTAボタン（画像: 2161x309px） */
.lp-container .pc-only .ctwlpt-block-cta-button-img {
    max-width: 1080px; /* 最大幅を制限 */
}

/* 大画面でのサイズ調整 */
@media screen and (min-width: 1200px) {
    .lp-container .pc-only .ctwlpt-block-cta-button-img {
        max-width: 960px; /* より小さく表示 */
    }
}

/* タブレット用 */
@media screen and (min-width: 769px) and (max-width: 1199px) {
    .lp-container .pc-only .ctwlpt-block-cta-button-img {
        max-width: 90%; /* 画面幅の90% */
    }
}

/* ===============================================
   SP版CTAボタンのサイズ調整
   =============================================== */

/* スマホ専用CTAボタン */
@media screen and (max-width: 768px) {
    .lp-container .sp-only .ctwlpt-block-cta-button-img {
        max-width: 100%;
        width: 100%;
    }
    
    .lp-container .ctwlpt-block-cta-button-wrap {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ===============================================
   確実なセンタリングのための追加設定
   =============================================== */

/* aタグのインラインスタイルを上書き */
.lp-container .ctwlpt-block-cta-button-img[style] {
    display: inline-block !important;
    margin: 0 auto !important;
}

/* 親要素のtext-alignを確実に適用 */
.lp-container .ctwlpt-block-cta-button-wrap-img-type {
    text-align: center !important;
}

/* ===============================================
   デバッグ用（問題確認時のみ有効化）
   =============================================== */

/*
.lp-container .wp-block-ctwlpt-block-cta-a-01 {
    outline: 2px solid blue;
}

.lp-container .ctwlpt-block-cta-button-img {
    outline: 2px solid red;
}

.lp-container .ctwlpt-block-cta-button-img img {
    outline: 2px solid green;
}
*/