/* 印刷時にのみ適用されるスタイル */
@media print {
    
    @media print {
        /* 基本設定 */
        body {
            margin: 0;
            padding: 0;
            font-size: 12px;
            background: none !important;
            color: black !important;
        }
    
        /* コンテナは表示しない */
        .container {
            display: none !important;
        }
    
        /* テストと答えのカラム設定 */
        .test-container, .answer-container {
            width: 100%;
            margin: 0 auto;
            padding: 0;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            background: none !important;
            box-shadow: none !important;
        }
    
        .column {
            width: 48%;
            display: inline-block;
            vertical-align: top;
            text-align: left;
            background: none !important;
            box-shadow: none !important;
            padding: 0;
            margin: 0 1% 0 0;
        }
    
        /* 最後のカラムは余白なし */
        .test-container .column:last-child, 
        .answer-container .column:last-child {
            margin-right: 0;
        }
    
        /* 単語ペア、回答ペア */
        .word-pair, .answer-pair {
            margin-bottom: 8px;
            padding: 2px 0;
            border-bottom: 1px dashed #000; /* 下線だけ残す */
            background: none !important;
            box-shadow: none !important;
        }
    
        .word-pair span, .answer-pair span {
            flex: 1;
            font-size: 14px;
        }
    
        /* 入力欄も背景なし、下線だけ */
        .word-pair input {
            flex: 1;
            border: none;
            border-bottom: 1px solid #000;
            border-radius: 0;
            background: none !important;
            box-shadow: none !important;
            font-size: 14px;
        }
    
        /* 不要なボタン類・メニューバーは非表示 */
        .button-container, .no-print, button, select, .navbar, .menu-btn, .menu {
            display: none !important;
        }
    
        /* ファイル名表示は残す */
        #fileName {
            text-align: center;
            margin: 10px 0;
            font-size: 14px;
            color: black !important;
        }
    
        /* アニメーションもすべてオフ */
        * {
            animation: none !important;
            transition: none !important;
        }
    
        /* ページ区切り用 */
        .page-break {
            page-break-before: always;
        }
    }
        

    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; /* 上下の余白を小さく設定 */
    }

}