@charset "UTF-8";

/* * =========================================
 * Base Settings & Variables
 * ========================================= */
:root {
    --main-color: #0a3d62;
    --sub-color: #f1c40f;
    --accent-color: #e74c3c;
    
    --text-color: #333;
    --bg-color: #f4f4f4;
    --white: #ffffff;
    --gray-bg: #e0e0e0;
    --drawer-width: 85%;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    width: 100%;
    margin: 0;
}

/* スマホでの横揺れ防止 */
html { overflow-x: hidden; }
body { overflow-x: hidden; }

img { max-width: 100%; height: auto; }

body { 
    font-family: "Helvetica Neue", Arial, sans-serif; 
    background: #333; 
    padding: 10px;
    color: var(--text-color);
    /* PCで2カラムの高さを確保するため */
    min-height: 100vh;
}

/* アプリ全体のコンテナ */
.app-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 100vw;
    /* スマホではボタンが浮くため、その下の余白を確保 */
    padding-bottom: 80px; 
}


/* * =========================================
 * Input Panel (スマホ：ドロワー / PC：左カラム)
 * ========================================= */
.input-panel {
    /* --- スマホ時の設定 (ドロワー) --- */
    position: fixed;
    top: 0;
    right: -100%;
    width: var(--drawer-width);
    
    /* アドレスバー考慮の高さ */
    height: 100vh;
    height: 100dvh;
    
    background: var(--white);
    z-index: 2000;
    box-shadow: -5px 0 15px rgba(0,0,0,0.3);
    transition: right 0.3s ease-in-out;
    
    /* 内部を上下分割（スクロール部 + 固定ボタン部） */
    display: flex;
    flex-direction: column;
    padding: 0;
}

.input-panel.is-open {
    right: 0;
}

/* ドロワー内のスクロールエリア */
.drawer-scroll-content {
    flex: 1; /* 余った高さを全部使う */
    overflow-y: auto; /* ここだけスクロール */
    padding: 20px;
    padding-bottom: 40px;
    -webkit-overflow-scrolling: touch;
}

/* ドロワーを閉じるボタン */
.drawer-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #ccc;
    border: none;
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    z-index: 10;
}

/* 設定を開くフロートボタン */
.settings-fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1500;
    background: #5492ee;
    color: #ffffff;
    border: none;
    padding: 15px 25px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 決定ボタン（スマホ下部固定） */
.drawer-reflect-btn {
    display: block;
    width: 100%;
    margin: 0;
    /* 上下の余白 + iPhone下部の安全領域 */
    padding: 18px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
    
    background: #5492ee; 
    color: #fff;
    font-weight: bold;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-size: 1rem;
    text-align: center;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.1);
    
    flex-shrink: 0; /* 縮まないように固定 */
    z-index: 20;
}
.drawer-reflect-btn:active { opacity: 0.9; }


/* * =========================================
 * PC Layout (1024px以上)
 * シンプルな2カラム構成に戻す（余計なことはしない）
 * ========================================= */
@media (min-width: 1024px) {
    body {
        /* 全体のスクロールを消し、左右のカラムそれぞれでスクロールさせる */
        height: 100vh;
        overflow: hidden; 
        padding: 20px;
    }

    .app-container { 
        flex-direction: row; 
        height: 100%; 
        overflow: hidden; /* コンテナ自体もはみ出し禁止 */
        padding-bottom: 0;
    }

    /* 左カラム：入力パネル */
    .input-panel {
        position: static; /* 固定配置を解除 */
        width: 340px;
        height: 100%;
        box-shadow: none;
        transition: none;
        right: auto;
        border-radius: 8px;
        
        /* 普通のブロック要素として表示し、自身のスクロールバーを使う */
        display: block; 
        overflow-y: auto; 
        padding: 20px;
        flex-shrink: 0;
    }
    
    /* PCでは「ドロワー用スクロール枠」を無効化 */
    .drawer-scroll-content {
        display: contents;
        padding: 0;
        overflow: visible;
    }

    /* スマホ用ボタン類を非表示 */
    .settings-fab,
    .drawer-close-btn,
    .drawer-reflect-btn {
        display: none;
    }
}


/* * =========================================
 * Form Styles (文字サイズ制御)
 * ========================================= */
.input-panel h2 { font-size: 1.0rem; margin-bottom: 15px; border-bottom: 2px solid #ccc; padding-bottom: 5px; padding-right: 40px; }
.form-group { margin-bottom: 12px; }
.form-label { display: block; font-size: 0.80rem; font-weight: bold; margin-bottom: 4px; }

/* ★重要：スマホは16pxでズーム防止 */
.form-control, .form-select {
    width: 100%; 
    padding: 8px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    color: #333;
    font-size: 16px; /* スマホ用デフォルト */
}
.form-control::placeholder { color: #bababa; }

/* PCのみ文字サイズを0.9remに戻す */
@media (min-width: 1025px) {
    .form-control, .form-select {
        font-size: 0.9rem;
        padding: 6px;
    }
}

.section-title { margin-top: 10px; font-size: 0.9rem; background: #eee; padding: 4px; font-weight: bold; margin-bottom: 10px; }
.real-form-area {
    padding-top: 20px; border-top: 2px solid #333; background: #f9f9f9; padding: 5px 15px 15px 15px; border-radius: 4px; margin-top: 20px;
}
.real-submit-btn {
    width: 100%; padding: 12px; background: #d32f2f; color: #fff; border: none; font-weight: bold; cursor: pointer; font-size: 0.8rem; border-radius: 4px; -webkit-appearance: none;
}
.real-submit-btn:hover { opacity: 0.9; }
.anti-spam-field { display: none; }


/* * =========================================
 * Preview Area (右側)
 * シンプルなスクロールエリアに戻す
 * ========================================= */
.preview-area {
    width: 100%;
    background: #555;
    padding: 10px;
    border-radius: 8px;
    flex-grow: 1;
    
    /* PCでここだけスクロールさせる設定 */
    height: 100%;
    overflow-y: auto; 
}

/* グリッドレイアウト */
.wireframe-grid {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr;
    width: 100%;
    margin: 0 auto;
}

@media (min-width: 1100px) {
    .wireframe-grid { 
        grid-template-columns: 1fr 1fr; 
        max-width: 900px;
    }
}


/* * =========================================
 * Page Components (中身のデザイン)
 * ========================================= */
.wf-page {
    background: var(--white);
    display: flex;
    flex-direction: column;
    height: auto;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    overflow: hidden;
    margin-bottom: 0;
}
.page-label {
    position: absolute; top: 0; left: 33%; z-index: 100;
    background: rgba(0,0,0,0.5); color: #fff; font-size: 0.7rem; padding: 2px 6px;
}

.wf-header-top { background: var(--white); padding: 8px 15px; display: flex; justify-content: space-between; align-items: center; height: 40px; }
.brand-area { display: flex; align-items: center; gap: 5px; }
.brand-text { font-weight: bold; font-size: 1rem; color: #333; }
.header-phone { font-size: 0.7rem; font-weight: bold; }

.wf-nav-bar { background: var(--main-color); color: var(--white); height: 30px; display: flex; align-items: center; justify-content: space-around; font-size: 0.65rem; padding: 0 10px; }
.wf-nav-bar span { border-right: 1px solid rgba(255,255,255,0.3); flex: 1; text-align: center; }
.wf-nav-bar span:last-child { border-right: none; }

.wf-content { overflow: hidden; padding: 0; display: flex; flex-direction: column; }

.wf-title-red { color: var(--accent-color); font-weight: bold; font-size: 0.95rem; margin-bottom: 5px; border-bottom: 1px solid #eee; padding-bottom: 2px; }
.wf-img-gray { background: #ccc; width: 100%; height: 100%; object-fit: cover; display: block; position: relative; }

.hero-section { position: relative; height: 160px; width: 100%; border-bottom: 3px solid #fff; }
.hero-section img { width: 100%; height: 100%; object-fit: cover; }
.hero-copy { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.8); width: 90%; text-align: center; z-index: 2; font-size: 1.3rem; }
.hero-brand { position: absolute; bottom: 5px; right: 10px; color: #fff; font-weight: bold; font-size: 0.9rem; background: rgba(0,0,0,0.4); padding: 4px 10px; border-radius: 4px; text-shadow: 0 1px 2px rgba(0,0,0,0.8); z-index: 2; }

.top-lead-section { padding: 10px; display: flex; gap: 10px; min-height: 100px; }

.card-grid { display: flex; gap: 5px; padding: 10px; justify-content: space-between; }
.card-item { flex: 1; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.card-img-box { height: 50px; border: 1px solid #999; width: 100%; }
.card-title-sm { font-size: 0.7rem; color: #333; font-weight: bold; margin-top: 3px; }
.card-btn-dummy { background-color: var(--accent-color); color: #fff; font-size: 0.6rem; padding: 2px 8px; border-radius: 10px; margin-top: 2px; text-align: center; width: 80%; }

.list-row { display: flex; gap: 10px; padding: 10px; border-bottom: 1px solid #eee; min-height: 80px; }
.list-thumb { width: 80px; height: 60px; flex-shrink: 0; }
.list-desc { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }

.detail-top-section { padding: 10px; }
.detail-flex { display: flex; gap: 10px; min-height: 90px; }
.detail-img-box { width: 40%; height: auto; border: 1px solid #999; min-height: 80px;}
.detail-text-box { width: 60%; background: var(--gray-bg); padding: 5px; font-size: 0.6rem; }

.company-section { padding: 10px; }
.table-box { width: 100%; border-collapse: collapse; font-size: 0.7rem; margin-bottom: 10px; }
.table-box th, .table-box td { border: 1px solid #ccc; padding: 4px; }
.table-box th { background: #eee; width: 30%; text-align: left; }
.map-box { height: 80px; width: 100%; background: #ccc; border: 1px solid #999; }

.contact-wrap { padding: 20px; }
.contact-desc { font-size: 0.8rem; margin-bottom: 15px; color: #666; font-weight: bold; }
.contact-form-group { margin-bottom: 10px; }
.contact-label { display: block; font-size: 0.7rem; font-weight: bold; margin-bottom: 3px; }
.contact-input-dummy { width: 100%; padding: 8px; border: 1px solid #ccc; background: #eee; font-size: 0.8rem; color: #999; }
.contact-textarea-dummy { width: 100%; height: 80px; padding: 8px; border: 1px solid #ccc; background: #eee; font-size: 0.8rem; resize: none; color: #999; }
.contact-btn-dummy { width: 30%; padding: 10px; background: #999; color: #fff; border: none; font-weight: bold; margin: 5px 35% 0px; cursor: default; }

.wf-footer { margin-top: 0; }
.wf-footer-sub { background: var(--sub-color); padding: 15px 10px; display: flex; justify-content: space-between; align-items: flex-start; }
.footer-col-left { width: 25%; display: flex; flex-direction: column; gap: 5px; }
.footer-btn-white { background: #fff; padding: 5px 2px; font-size: 0.6rem; text-align: center; border: 1px solid #ddd; font-weight: bold; }
.footer-col-center { width: 30%; height: 100%; padding: 5px; display: flex; flex-direction: column; gap: 4px; align-items: center; background-color:#FFF;}
.footer-link { font-size: 0.6rem; color: #333; text-decoration: underline; line-height:0.5rem;}
.footer-col-right { width: 40%; background-color:#FFF; height: 100%; padding: 5px; display: flex; flex-direction: column; justify-content: center; font-size: 0.6rem; border: 1px solid #fff; }
.footer-brand { font-weight: bold; font-size: 0.7rem; margin-bottom: 2px; color: var(--main-color); }
.footer-info { line-height: 1.3; color: #444; }
.wf-footer-copy { background: var(--main-color); color: #fff; text-align: center; font-size: 0.6rem; padding: 5px; }

/* Modal */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    opacity: 1; transition: opacity 0.3s ease;
}
.modal-content {
    background: #fff; width: 100%; max-width: 500px;
    border-radius: 8px; padding: 30px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    text-align: center;
    max-height: 90vh;
    overflow-y: auto;
}
.modal-title { font-size: 1.2rem; font-weight: bold; margin-bottom: 20px; color: var(--main-color); border-bottom: 2px solid #eee; padding-bottom: 10px; }
.modal-steps { text-align: left; margin-bottom: 20px; font-size: 0.9rem; line-height: 1.8; }
.modal-steps li { margin-bottom: 10px; list-style: none; padding-left: 1.2em; text-indent: -1.2em; }
.modal-steps li::before { content: "✅"; margin-right: 8px; }
.modal-note { background: #fff3cd; border: 1px solid #ffeeba; color: #856404; padding: 10px; font-size: 0.8rem; border-radius: 4px; margin-bottom: 25px; text-align: left; }
.modal-btn { background: var(--main-color); color: #fff; border: none; padding: 12px 40px; font-size: 1rem; font-weight: bold; border-radius: 50px; cursor: pointer; transition: transform 0.2s; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.modal-btn:hover { transform: translateY(-2px); opacity: 0.9; }
.modal-hidden { opacity: 0; pointer-events: none; }