/*
Theme Name: フェンス CSS
Author: RenTanaka
Description: Web Componentsを使用したLPテーマ
Version: 1.1 (Fixed)
*/

/* --- 1. 基本設定（リセット・共通） --- */
body, html {
    margin: 0;
    padding: 0;
    background-color: #cfebff;
    overflow-x: hidden;
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}

/* SP（スマホ）向けの基本設定：最大幅550px */
.page-wrapper {
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    background-color: #fff;
    line-height: 0;
}

/* 画像セクションの共通設定 */
image-section {
    display: block;
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

/*
 * ※ Shadow DOM 内部のスタイル（.section, .company-display, .orange-button 等）は
 *   main.js / sticky-cta.js 内の <style> タグで管理しています。
 *   外部CSSからはShadow DOM内に届かないため、ここではCSS変数のみで制御します。
 */

/* --- 2. アニメーション定義 --- */
@keyframes heartbeat {
    0% { transform: scale(1); }
    10% { transform: scale(1.03); }
    20% { transform: scale(1); }
    30% { transform: scale(1.05); }
    40% { transform: scale(1); }
    100% { transform: scale(1); }
}

/* --- 3. セクション別カスタマイズ（SP用変数がベース） --- */

/* 00: トップセクション（ヘッダー） */
#top-section {
    background-color: #fff; /* 背景を白に設定 */
    
    /* SP（スマホ）での高さ指定 */
    --section-height: 80px; 
    height: var(--section-height);
    
    --button-top: 25%; /* ボタンを中央寄りに */
    --button-width: 55%;
    --tel-font-size: 0.8rem;
    --orange-tel-size: 14px;
    --company-top: 40%; /* 会社名も中央寄りに */
    --company-font-size: 0.8rem;
    --company-max-width: 40%; 
}

/* 01: メインビジュアル */
#mv-section { 
    --button-top: 82%; 
    --button-animation: heartbeat 2.5s ease-in-out infinite;
    --button-width: 90%;
    --tel-display: none;
}

/* 03: オファー */
#offer-section { 
    --button-top: 75%;
    --button-width: 95%;
    --tel-font-size: 1.5rem;
}

/* 08: エリア（サンドイッチ構造） */
#area-section {
    --section-bg: #ffffff;
    --area-box-pos: relative;
    --area-box-top: 0;
    --area-box-left: auto;       
    --area-box-transform: none;   
    --area-box-width: 85%;       
    --area-box-margin: 30px auto; 
    --area-box-padding: 40px 20px;
    --area-box-bg: #c0e7ff;
    --text-upper-bg: #54b9ff;
    --text-upper-color: #ffffff;
    --text-upper-size: 1.5rem;
    --text-upper-padding: 15px 30px;
    --text-upper-radius: 4px;
    --text-lower-bg: #f9f9f9;
    --text-lower-color: #333;
    --text-lower-padding: 20px;
    --text-lower-radius: 8px;
}

/* --- 4. 追尾CTA (Sticky CTA) --- */
.sticky-cta-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    max-width: 550px; 
    margin: 0 auto; 
    transform: translateY(100%); 
    transition: transform 0.4s ease-out;
}
.sticky-cta-container.visible {
    transform: translateY(0); 
}

/* --- 5. お問い合わせフォーム (#contact 共通) --- */
#contact, 
#contact2 {
    font-family: sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
    padding-bottom: 40px;
    width: 100%;
    max-width: 550px; 
    margin: 0 auto;
}

#contact .form-title-image,
#contact2 .form-title-image {
    width: 100%;
    max-width: 550px; 
    height: auto;
    display: block;
    margin: 0 auto; 
}

#contact .form-content-wrapper,
#contact2 .form-content-wrapper {
    max-width: 90%;
    margin: 0 auto;
    padding-top: 30px;
}

/* フォームパーツのスタイル */
#simple_form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    font-family: "Helvetica Neue", Arial, sans-serif;
}
.form_lead { text-align: center; font-weight: bold; font-size: 1.2rem; margin-bottom: 30px; color: #333; }
.simple-form_parts { margin-bottom: 25px; }
.simple-form_label { display: flex; align-items: center; margin-bottom: 8px; }
.form_title { color: #003399; font-weight: bold; font-size: 1.1rem; margin-right: 10px; }
.form_red { background-color: #fff; color: #ff0000; font-size: 0.8rem; font-weight: bold; }
.form_blue { background-color: #fff; color: #000000; font-size: 0.8rem; font-weight: bold; }

.form_text input, .form_select select, .form_text_area textarea {
    width: 100%;
    padding: 15px;
    background-color: #f2f2f2;
    border: none;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 1rem;
    appearance: none;
}

/* 送信ボタン */
.ct_submit {
    display: block;
    width: 240px;
    margin: 0 auto;
    padding: 15px;
    background: #ff9800; 
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 0 #e68a00;
    transition: transform 0.1s;
}
.ct_submit:active { transform: translateY(2px); box-shadow: 0 2px 0 #e68a00; }

/* --- 6. フッター --- */
.lp-footer {
    background-color: #f9f9f9;
    padding: 40px 20px;
    border-top: 1px solid #eee;
    color: #333;
    font-family: sans-serif;
    line-height: 1.6;
}
.footer-container { max-width: 550px; margin: 0 auto; }
.company-table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
.company-table th, .company-table td { padding: 12px 15px; border-bottom: 1px solid #ddd; text-align: left; }
.company-table th { width: 30%; color: #003399; background-color: #f0f4f8; font-weight: bold; white-space: nowrap; }
.company-table td { background-color: #fff; }
.company-title {
    font-size: 1.5rem; color: #333; padding: 10px 0 10px 15px; margin: 0;
    border-left: 6px solid #003399; border-bottom: 1px solid #ddd; display: block; font-weight: bold;
}
.company-display-wrapper { max-width: 550px; margin: 40px auto 20px; padding: 0 20px; }
.copyright { text-align: center; font-size: 0.8rem; color: #888; margin-top: 20px; }

/* --- 7. iPhone用 微調整 --- */
@media (max-width: 390px) { 
    #mv-section { --button-top: 82%; } 
}
@media (min-width: 391px) and (max-width: 428px) { 
    #mv-section { --button-top: 85%; }
}

/* --- 8. PC用レスポンシブ設定（768px以上） --- */
@media screen and (min-width: 768px) {
    
    /* 【重要】PCでは横幅制限を解除して画面いっぱいに */
    .page-wrapper, 
    image-section, 
    .sticky-cta-container, 
    #contact, 
    #contact2,
    .lp-footer {
        max-width: 100% !important;
        width: 100%;
    }

    /* ただし、フォームの中身やフッターの中身は広がりすぎないように制限 */
    .form-content-wrapper,
    .footer-container,
    .company-display-wrapper {
        max-width: 1000px !important;
        margin: 0 auto;
    }
    
    sticky-cta {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;

        /* ★ここを追加！ 数値を小さくするほどボタンが小さくなります */
        --cta-btn-width: 35% !important; 
    }

    /* セクション別 PC用調整 */
    #top-section {
        /* PCでの高さ指定（お好みの高さに調整してください） */
        --section-height: 100px !important;
        height: var(--section-height) !important;

        --button-width: 30% !important;
        --button-side-padding: 2% !important;
        --company-max-width: 50% !important;
        --company-font-size: 2rem;
        --tel-font-size: 1rem;
        --company-top: 30%; /* 会社名を少し上に */

        /* PCではSP用のオレンジボタンを非表示（header-right-itemsに統合） */
        --button-top: -9999px;
    }

    /* エリアセクション（サンドイッチ）のPC調整 */
    #area-section {
        --area-box-pos: relative;
        --area-box-top: 0;
        --area-box-width: 800px !important; /* 固定幅で見やすく */
        --area-box-padding: 60px 40px !important;
        --text-upper-size: 1.5rem !important;
        --text-lower-size: 1.2rem !important;
        --text-lower-padding: 30px 60px !important;
    }
}

/* --- 9. プライバシーポリシー モーダル用設定 --- */
.policy_modal {
    display: none; /* 最初は隠しておく */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6); /* 背景を暗くする */
    overflow-y: auto;
}

.modal_content {
    background-color: #fff;
    margin: 5% auto;
    padding: 30px;
    width: 85%;
    max-width: 800px;
    border-radius: 15px;
    position: relative;
    line-height: 1.6;
}

.modal_close {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    color: #aaa;
}

.modal_close:hover { color: #000; }

.policy_text {
    max-height: 400px;
    overflow-y: scroll;
    padding: 15px;
    border: 1px solid #eee;
    font-size: 0.9rem;
    color: #333;
}

.policy_title {
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    color: #003399;
}

/* プライバシーポリシーのリンクテキスト */
.simple_form_policy_btn .link {
    color: #0088ff;
    text-decoration: underline;
    cursor: pointer;
}

/* --- 03 Offer PC版レイアウト用CSS --- */

/* 表示切り替え用クラス */
.sp-only { display: block; }
.pc-only { display: none; }

@media screen and (min-width: 768px) {
    .sp-only { display: none; }
    .pc-only { display: block; }

    /* --- 01 MVセクション PC版レイアウト --- */
    #mv-section-pc {
        width: 100%;
        background-image: url('images/01_mv_bg_pc.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .mv-pc-inner {
        max-width: 1100px;
        margin: 0 auto;
        padding: 40px 50px;
        box-sizing: border-box;
    }

    .mv-pc-main-img {
        width: 100%;
        height: auto;
        display: block;
    }

    .mv-pc-cta {
        width: 100%;
        padding: 30px 0;
        background-color: #fff;
    }

    .mv-pc-cta-inner {
        max-width: 800px;
        margin: 0 auto;
        padding: 15px 40px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;
        background-color: #bce4ff;
        border-radius: 10px;
    }

    .mv-pc-cta-card {
        height: auto;
        max-height: 120px;
        width: auto;
        display: block;
    }

    .mv-pc-cta-btn-link {
        display: block;
        transition: transform 0.2s;
        animation: heartbeat 2.5s ease-in-out infinite;
    }
    .mv-pc-cta-btn-link:hover {
        transform: scale(1.05);
    }

    .mv-pc-cta-btn-img {
        height: auto;
        max-height: 120px;
        width: auto;
        display: block;
    }

    /* PC版オファーセクション全体 */
    #offer-section-pc {
        width: 100%;
        /* 背景画像をPC用に設定 */
        background-image: url('images/03_offer_bg_pc.png'); /* パスは環境に合わせて調整してください */
        background-size: cover;
        background-position: center;
        padding: 60px 0;
    }

    /* インナー幅（中央寄せ） */
    .offer-pc-inner {
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: flex-start; /* 上揃え */
        gap: 40px; /* 左右の間の余白 */
        padding: 0 20px;
    }

    /* 左半分（画像群） */
    .offer-pc-left {
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center; /* 画像を中央揃え */
    }

    .offer-ttl, 
    .offer-ttl-inner {
        width: 100%;
        height: auto;
        margin-bottom: 20px;
        display: block;
    }

    .offer-btn-link {
        display: block;
        width: 80%;
        margin-top: 10px;
        transition: transform 0.2s;
        
        position: relative; /* ★重要：これを追加しないと文字が飛んでいきます */
        text-decoration: none;
    }
    .offer-btn-link:hover {
        transform: scale(1.05);
    }
    .offer-btn-img {
        width: 100%;
        height: auto;
    }

    /* 右半分（フォーム） */
    .offer-pc-right {
        width: 50%;
    }

    /* フォーム周りの微調整 */
    .offer-form-wrapper #simple_form {
        padding: 20px;
        background: rgba(255, 255, 255, 0.9); /* フォーム背景を少し白くする等の調整 */
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    /* 既存のフォームスタイルの上書きが必要な場合 */
    .offer-form-wrapper .form-title-image {
        display: none; /* もしフォーム上の「お問い合わせ」画像が不要なら消す */
    }

    /* --- フォーム上のリボン設定 --- */
    .pc-form-ribbon {
        background-color: #1fc0ff; /* 指定の色 */
        color: #ffffff;
        font-size: 1.4rem;
        font-weight: bold;
        text-align: center;
        padding: 15px 0;
        border-radius: 10px 10px 0 0; /* 上の角だけ丸く */
        position: relative;
        z-index: 2; /* フォームより手前に表示 */
        box-shadow: 0 -2px 5px rgba(0,0,0,0.05); /* ほんのり影 */
    }

    /* フォーム全体を囲む枠（リボンの下にくっつける） */
    .offer-form-wrapper {
        background-color: #fff;
        border-radius: 0 0 10px 10px; /* 下の角だけ丸く */
        box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 全体の影 */
        overflow: hidden;
    }

    /* フォーム自体の余白調整 */
    .offer-form-wrapper #simple_form {
        padding: 20px !important;
        margin: 0 !important;
        box-shadow: none !important; /* 二重に影がつかないように */
    }

    /* PC版では、フォームの中にもともとある「お問い合わせ」画像を消す */
    .offer-pc-right .form-title-image {
        display: none;
    }

    /* ★追加：重ねる電話番号のスタイル */
    .offer-btn-tel {
        position: absolute;
        top: 50%;       /* 上から50%の位置 */
        left: 50%;      /* 左から50%の位置 */
        transform: translate(-50%, -50%); /* 完全に中央に寄せる */
        
        color: #ffffff; /* 文字色（白） */
        font-size: 1.8rem; /* 文字の大きさ（お好みで調整） */
        font-weight: bold;
        font-family: "Helvetica Neue", Arial, sans-serif;
        white-space: nowrap; /* 改行させない */
        text-shadow: 0 1px 2px rgba(0,0,0,0.4); /* 文字を見やすくする影 */
        pointer-events: none; /* 文字をクリックしてもリンクが反応するように */
        width: 100%;
        text-align: center;
        line-height: 1;
    }
}