/* ===================================================
           📱 画面表示用（スマホ・PC共通）のスタイル
        =================================================== */
       #monshinhyou {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #f5f7fa;
            color: #333;
            margin: 0;
            padding: 15px;
        }
        .monshinhyou-outer {
            max-width: 800px;
            width: 100%;
            margin: 0 auto;
            background: #fff;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            box-sizing: border-box;
        }

        .form-group {
            margin-bottom: 0px;
        }
        label.group-title {
	display: block;
	 margin-top: 10px;
            margin-bottom: 5px;
            font-weight: bold;
            font-size: 1.6rem;
        }
        
        /* 基本の入力欄 */
        input[type="text"], 
input[type="date"], 
input[type="tel"], 
textarea{
            display: block;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            -webkit-appearance: none;
            appearance: none;
            padding: 12px;
            font-size: 1.6rem;
            border: 2px solid #ddd;
            border-radius: 8px;
            box-sizing: border-box;
            margin: 0;
        }
        input:focus, textarea:focus {
            border-color: #27ae60;
            outline: none;
        }

        /* チェックボックスのスタイル */
       .checkbox-label {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 16px;
    cursor: pointer;
    position: relative;
}
/* 本物のチェックボックス（青色）は非表示にする */
.checkbox-label input[type="checkbox"],
.checkbox-label input[type="radio"] {
    position: absolute; opacity: 0; width: 0; height: 0;
}
.custom-checkmark {
    display: inline-block;
    height: 22px; width: 22px;
    border: 0.5px solid #27ae60; /* 緑の線 */
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
    background-color: #fff;
    box-sizing: border-box;
    print-color-adjust: exact; /* 👈 印刷時も色を維持する命令 */
    -webkit-print-color-adjust: exact;
}
/* チェックがついたら背景を緑にする */
.checkbox-label input[type="checkbox"]:checked ~ .custom-checkmark {
    background-color: #27ae60;
}
/* 白いチェックマーク（✓）の形を作る */
.custom-checkmark:after {
    content: "✓"; /* 👈 線の組み合わせではなく「文字」にする */
    position: absolute;
    display: none;
    left: 3px;
    top: 0px;
    color: white;
    font-size: 15px;
    font-weight: bold;
}
/* チェックがついたら白いチェックマーク（✓）を表示 */
.checkbox-label input[type="checkbox"]:checked ~ .custom-checkmark:after {
    display: block;
}

        /* 文章の途中にパーツを入れる共通スタイル */
        .inline-sentence {
            font-size: 16px;
            line-height: 2.2;
            background: #fdfdfd;
            padding: 15px;
            border-radius: 8px;
            border: 1px dashed #ccc;
        }

        .inline-input {
            display: inline-block !important;
            width: 70px !important;
            padding: 6px 4px !important;
            font-size: 16px;
            text-align: center;
            border: 2px solid #ddd;
            border-radius: 6px;
            margin: 0 5px;
        }
        
/* 💡 ラジオボタン（type="radio"）にチェックがついた時も、チェックボックスと同じ「✓文字」を表示させる */
input[type="radio"]:checked ~ .custom-checkmark {
    background-color: #27ae60;
}
input[type="radio"]:checked ~ .custom-checkmark::after {
    content: "✓" !important; /* 👈 丸ではなくチェックマークを強制表示 */
    position: absolute;
    display: block;
    left: 3px;
    top: -2px;
    color: white;
    font-size: 15px;
    font-weight: bold;
    border-radius: 0; /* 丸型設定をリセット */
    background-color: transparent;
}

        /* 🆕 追加：その他用の少し広い入力欄（画面表示用） */
.inline-input-wide {
    display: inline-block !important;
    width: 200px !important; /* 👈 ここでお好みの広さに調整できます（例: 200px） */
    padding: 6px 8px !important;
    font-size: 16px;
    border: 2px solid #ddd;
    border-radius: 6px;
    margin-left: 5px;
    box-sizing: border-box;
}

        .inline-select {
            display: inline-block !important;
            width: 80px !important;
            padding: 6px 24px 6px 8px !important;
            font-size: 16px;
            text-align: center;
            border: 2px solid #ddd;
            border-radius: 6px;
            margin: 0 5px;
            background-color: #fff;
            -webkit-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://w3.org' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 8px center;
            background-size: 12px;
        }

        /* 最初は隠しておく設定 */
        .hidden-question {
            display: none; 
            background-color: #f9fbfd;
            padding: 15px;
            border-radius: 8px;
            border-left: 4px solid #27ae60;
            margin-top: 10px;
        }

        /* 印刷ボタン */
        .no-print {
            margin-top: 30px;
            text-align: center;
        }
        .print-btn {
            background-color: #27ae60;
            color: #fff;
            border: none;
            padding: 14px 35px;
            font-size: 16px;
            font-weight: bold;
            border-radius: 25px;
            cursor: pointer;
            width: 100%;
            max-width: 250px;
        }

/* ===================================================
   🖨️ 印刷用のスタイル（完全統合・WordPressバグ対策版）
=================================================== */
@media print {
    /* ---------------------------------------------------
       A. WordPressの不要要素を消去 ＆ 巻き込み防止対策
    --------------------------------------------------- */
    /* 1. ヘッダー・フッター・サイドバーなどを指定して非表示 */
    header, footer, sidebar, .sidebar, #header, #footer, #sidebar,
    .site-header, .site-footer, .widget-area, .nav-menu, #page-top,
    .admin-bar, #wpadminbar, .no-print { 
        display: none !important; 
    }

    /* 2. 背景を白にリセット */
    html, body {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. 💡【白紙化対策の核心】
       問診票の外側にあるWordPressの親要素「だけ」を強制表示させ、
       ヘッダーやフッターなど他の不要な要素はしっかり除外する設定 */
    html body *:has(.monshinhyou-outer) {
        display: block !important;
        visibility: visible !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 4. 問診票（外枠）の配置設定（.containerから名前が変わった部分の対応） */
    .monshinhyou-outer {
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 210mm !important; /* A4横幅 */
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    /* 5. 念のため元の.containerの設定も.monshinhyou-outerと同じにして残す */
    .container { 
        box-shadow: none !important; 
        padding: 0 !important; 
        max-width: 100% !important; 
        width: 210mm !important; 
    }


    /* ---------------------------------------------------
       B. 元の美しい「コンパクト・行間詰め」設定を100%復元
    --------------------------------------------------- */
    /* 全体のフォントサイズを小さくし、余白と行間をギュッと詰める */
    body { 
        font-size: 10pt !important; /* 全体の文字を小さく */
        line-height: 1.2 !important; /* 行間を極限まで詰める */
    }

    /* タイトルと日付を横一列に並べる（日付をタイトルの横へ） */
    .title-area {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
        border-bottom: 2px solid #333 !important;
        padding-bottom: 5px !important;
        margin-bottom: 15px !important;
    }
    h2 { 
        font-size: 16pt !important; /* タイトルを少し小さく */
        margin: 0 !important; 
        padding: 0 !important;
    }

    /* 通常の縦並び余白を小さくリセット */
    .form-group { 
        margin-bottom: 10px !important; 
    }
    label.group-title { 
        font-size: 9pt !important; 
        color: #333 !important; 
        margin-bottom: 2px !important;
    }

    /* 名前・年齢・11 / 住所・電話番号 を一列に並べる設定 */
    .print-row-3col {
        display: flex !important;
        gap: 15px !important; /* 項目間のスキマ */
    }
    .print-row-3col > .form-group:nth-child(1) { width: 60% !important; }
    .print-row-3col > .form-group:nth-child(2) { width: 20% !important; }
    .print-row-3col > .form-group:nth-child(3) { width: 20% !important; }

    .print-row-2col {
        display: flex !important;
        gap: 15px !important;
    }
    .print-row-2col > .form-group:nth-child(1) { width: 65% !important; }
    .print-row-2col > .form-group:nth-child(2) { width: 35% !important; }

    /* 入力欄を印刷用（シンプルな下線）に統一 */
    input[type="text"], input[type="date"], input[type="tel"], textarea {
        border: none !important;
        border-bottom: 1px solid #666 !important;
        border-radius: 0 !important;
        padding: 2px 0 !important;
        background: transparent !important;
        font-size: 10pt !important;
        resize: none !important;
        height: auto !important;
        display: inline-block !important;
    }

    /* 喫煙歴などの文章中パーツの調整 */
    .inline-sentence { border: none !important; padding: 0 !important; background: transparent !important; }
    .inline-input, .inline-select, .inline-input-wide {
        border: none !important;
        border-bottom: 1px solid #666 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        height: auto !important;
        font-size: 10pt !important;
        background: transparent !important;
    }

    /* 自作チェックボックスの印刷時サイズ調整 */
    .custom-checkmark {
        height: 12px !important; width: 12px !important;
        border: 0.5px solid #27ae60 !important;
    }
    .checkbox-label input[type="checkbox"]:checked ~ .custom-checkmark,
    input[type="radio"]:checked ~ .custom-checkmark {
        background-color: #27ae60 !important;
    }
    .custom-checkmark:after {
        left: 1px !important; top: -5px !important;
        font-size: 9px !important; color: white !important;
    }
    
    /* チェックボックス・ラジオボタン全体の行間を詰める */
    .checkbox-label {
        margin-bottom: 4px !important; 
        font-size: 10pt !important;    
        line-height: 1.2 !important;   
    }

    /* 条件付きで現れる隠し質問エリアの余白を詰める */
    .hidden-question {
        padding: 0 !important;         
        margin-top: 4px !important;    
        border-left: none !important;  
    }
    .hidden-question .form-group {
        margin-bottom: 6px !important; 
    }

    /* 文章の途中にパーツを入れる部分（喫煙歴など）の文字と行間 */
    .inline-sentence {
        font-size: 10pt !important;    
        line-height: 1.4 !important;   
    }

    /* 複数行の自由記入欄（備考欄・アレルギー詳細など）の高さ調整 */
    textarea {
        font-size: 10pt !important;
        line-height: 1.3 !important;
        padding: 0 !important;
        height: auto !important; 
        min-height: 30px !important; 
	}
/* 1. 質問と回答のセット（.form-group）がページの境目で真っ二つに割れるのを防ぐ */
    .form-group {
        break-inside: avoid !important;
        -webkit-column-break-inside: avoid !important; /* Safari/iOS対策 */
    }

    /* 2. 複数行の自由記入欄（textarea）の枠が途中でちぎれるのを防ぐ */
    textarea {
        break-inside: avoid !important;
        -webkit-column-break-inside: avoid !important;
    }

    /* 3. 横並びにしたグループ（名前・年齢・11の列など）が途中で割れるのを防ぐ */
    .print-row-3col,
    .print-row-2col {
        break-inside: avoid !important;
        -webkit-column-break-inside: avoid !important;
    }

    /* 4. 条件付きで現れる隠し質問エリアも、親のチェックボックスから離れて
       次のページに一ポツンと取り残されないようにする */
    .hidden-question {
        break-inside: avoid !important;
        -webkit-column-break-inside: avoid !important;
	}
	
	    /* 💡 質問タイトルの「後ろ」での改ページを絶対に禁止する */
    label.group-title {
        break-after: avoid !important;
        -webkit-column-break-after: avoid !important; /* Safari/iOS対策 */
    }

    /* 💡 入力欄やチェックボックスの「前」での改ページもできるだけ避ける（セット感を強める） */
    input, select, textarea, .checkbox-label, .inline-sentence {
        break-before: avoid-page !important;
	}
	
@media print {
    
    /* ーーー ここまでに、今まで書いたたくさんの印刷用CSSがあります ーーー */
    textarea {
        font-size: 10pt !important;
        line-height: 1.3 !important;
        padding: 0 !important;
        height: auto !important; 
        min-height: 30px !important; 
    }
    
        /*Firefox設定 */
    @-moz-document url-prefix() {
        
        /* 1. 【バグ修正】チェックのない隠し質問は、Firefoxでも確実に消し去る */
        .hidden-question:not(.show-print) {
            display: none !important;
        }

        /* 2. 【大空白バグ対策】
           「名前や住所」の横並び（flex）は一切破壊せず、
           それ以外の『通常の設問（form-group）』だけ、Firefoxでの巨大な空白化をピンポイントで防ぎます */
        .form-group:not(.print-row-3col *):not(.print-row-2col *) {
            break-inside: auto !important;
            page-break-inside: auto !important;
        }
        .hidden-question {
            break-inside: auto !important;
            page-break-inside: auto !important;
        }

        /* 3. 【プレースホルダーバグの修正】
           Firefoxでの印刷時、入力欄の中にある薄いサンプル文字（プレースホルダー）を完全に透明化する */
        input::placeholder,
        textarea::placeholder {
            color: transparent !important;
            opacity: 0 !important;
        }
    }


} /* 👈 一番外側にある「@media print」全体の閉じカッコ */