/**
 * LP統合用カスタムCSS
 * 
 * 目的: LPと本サイトのヘッダー・フッターを統合する際の
 *       スタイル調整とレイアウト修正
 * 
 * 使い方:
 * 1. このファイルをHTMLと同じディレクトリに配置
 * 2. HTMLの</head>の前に以下を追加:
 *    <link rel="stylesheet" href="lp-integration-fix.css">
 */

/* ===============================================
   1. 基本的な統合設定
   =============================================== */

/* ヘッダーとLPコンテンツの境界をクリアに */
.main-site-header {
    position: relative;
    z-index: 100;
    margin-bottom: 0;
}

/* LPコンテナの基本設定 */
.lp-container {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* 横スクロール防止 */
}

/* フッターとLPコンテンツの境界 */
.main-site-footer {
    position: relative;
    z-index: 100;
    margin-top: 0;
}

/* ===============================================
   2. レイアウト崩れの修正
   =============================================== */

/* 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 !important; /* 中央寄せを強制 */
}

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

.lp-container .ctwlpt-block-cta-button-img img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
}

/* 画像コンテナの修正 */
.lp-container .ctwlpt-block-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* ===============================================
   3. レスポンシブ対応の強化
   =============================================== */

/* PC専用・SP専用表示の確実な制御 */
@media screen and (min-width: 769px) {
    /* PCでは.sp-onlyを非表示 */
    .lp-container .sp-only {
        display: none !important;
    }
    
    /* PCでは.pc-onlyを表示 */
    .lp-container .pc-only {
        display: block !important;
    }
}

@media screen and (max-width: 768px) {
    /* SPでは.pc-onlyを非表示 */
    .lp-container .pc-only {
        display: none !important;
    }
    
    /* SPでは.sp-onlyを表示 */
    .lp-container .sp-only {
        display: block !important;
    }
}

/* ===============================================
   4. セクションの余白調整
   =============================================== */

/* セクション間の余白を統一 */
.lp-container .wp-block-ctwlpt-block-section {
    margin-top: 0;
    margin-bottom: 0;
}

/* ファーストビューの調整 */
.lp-container .wp-block-ctwlpt-block-firstview-03 {
    width: 100%;
    max-width: 100%;
}

/* ===============================================
   5. 本サイトのスタイルとの干渉防止
   =============================================== */

/* LPコンテナ内では本サイトのグローバルスタイルをリセット */
.lp-container {
    /* フォント設定のリセット */
    font-family: -apple-system, "Helvetica Neue", "Hiragino Kaku Gothic ProN", 
                 "游ゴシック Medium", "メイリオ", meiryo, sans-serif;
    
    /* ボックスモデルの確保 */
    box-sizing: border-box;
}

.lp-container * {
    box-sizing: border-box;
}

/* 本サイトのヘッダー・フッター内では.lp-containerの影響を受けないように */
.main-site-header *,
.main-site-footer * {
    /* 本サイトのスタイルを優先 */
}

/* ===============================================
   6. アニメーションの調整
   =============================================== */

/* スクロールアニメーションの確実な動作 */
.lp-container .ctwlpt-scrollin {
    opacity: 0;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.lp-container .ctwlpt-scrollin.ctwlpt-scrolled {
    opacity: 1;
}

/* ===============================================
   7. デバッグ用（問題発生時のみ有効化）
   =============================================== */

/* 
問題が発生している場合は、以下のコメントを外して
各セクションの境界を可視化できます
*/

/*
.main-site-header {
    outline: 3px solid red;
}

.lp-container {
    outline: 3px solid blue;
}

.main-site-footer {
    outline: 3px solid green;
}

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

/* ===============================================
   8. 印刷時の調整
   =============================================== */

@media print {
    /* 印刷時はアニメーションを無効化 */
    .lp-container * {
        animation: none !important;
        transition: none !important;
    }
    
    /* 印刷時はSP/PC表示の制御を解除 */
    .lp-container .pc-only,
    .lp-container .sp-only {
        display: block !important;
    }
}

/* ===============================================
   9. アクセシビリティ対応
   =============================================== */

/* キーボードフォーカスの可視化 */
.lp-container a:focus,
.lp-container button:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/* スキップリンクの追加（必要に応じて） */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    z-index: 10000;
}

.skip-to-content:focus {
    top: 0;
}

/* ===============================================
   10. パフォーマンス最適化
   =============================================== */

/* 画像の遅延読み込み対応 */
.lp-container img[loading="lazy"] {
    content-visibility: auto;
}

/* アニメーションのパフォーマンス向上 */
.lp-container .ctwlpt-scrollin {
    will-change: opacity, transform;
}

/* ===============================================
   カスタマイズ例
   =============================================== */

/* 
必要に応じて以下のようなカスタマイズを追加できます：

1. ヘッダーとLPの間にスペースを追加:
   .lp-container {
       margin-top: 20px;
   }

2. LPとフッターの間にスペースを追加:
   .main-site-footer {
       margin-top: 40px;
   }

3. LP全体の最大幅を制限:
   .lp-container {
       max-width: 1200px;
       margin-left: auto;
       margin-right: auto;
   }

4. 背景色の追加:
   .lp-container {
       background-color: #f5f5f5;
   }
*/