/* 印刷時にのみ適用されるスタイル */
@media print {
    
    body {
        margin: 0; /* ページ全体の余白をゼロに */
        
        padding: 0; /* ページの内側に少し余白を設定 */
        font-size: 12px;
    }

    .container {
        width: 100%;
        margin: 0; /* コンテナの余白をゼロに */
    }

    .test-container, .answer-container {
        width: 100%; /* 幅を100%に */
        margin: 0 auto; /* 中央に配置 */
        padding-right: 0; /* 右パディングをゼロに */
        text-align: center; /* テキストを中央に配置 */
        box-sizing: border-box; /* パディングを含めたボックスサイズ */
    }

    .column {
        width: 45%; /* カラム幅を調整 */
        display: inline-block;
        vertical-align: top;
        text-align: left; /* カラム内のテキストは左揃え */
    }

    .word-pair, .answer-pair {
        margin-bottom: 8px;
        padding: 4px 0;
        border-bottom: 1px dashed #000; 
    }

    .word-pair input {
        font-size: 14px;
    }

    .button-container, .no-print {
        display: none; /* 印刷時にボタン類を非表示 */
    }

    h1 {
        margin-top: 20px;
        text-align: center;
    }

    .page-break {
        page-break-before: always; /* 常にページの前に区切りを挿入 */
        padding-top: 0; /* 余白を追加 */
        }
        .answer-pair span {
            flex: 1;
            margin-right: 10px; /* 日本語と英語の間に余白を追加 */
        }
    
    /* 共通のスタイル */
    .column {
        width: 48%;
        display: inline-block; /* 列を横並びにするための設定 */
        vertical-align: top; /* 縦に揃える */
    }

    /* 列間の余白を小さくする */
    .test-container .column, 
    .answer-container .column {
        margin-right: 1%; /* 右側の余白を小さく設定 */
    }

    .test-container .column:last-child, 
    .answer-container .column:last-child {
        margin-right: 0; /* 最後の列の右側の余白をゼロにする */
    }

    /* 内部の余白（padding）を調整 */
    .word-pair, .answer-pair {
        padding: 2px 0; /* 上下の余白を小さく設定 */
    }

}