body {
    margin: 0;  
    
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 2%;
    padding-bottom: 2%;
    background-color: #218838;      /* bodyのデフォルトのマージンをリセット */
}

.bg {
    margin: 0;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 1%;
    padding-bottom: 2%;
    background-color: #f8f8fb;
}

.question{
    margin: 0;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 3%;
    padding-bottom: 3%;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.answer{
    margin: 0;
    margin-top: 2%;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 1%;
    padding-bottom: 1%;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
    margin: 0, auto;
    color: #333;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    margin: 0;
    border-radius: 2px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

button:hover {
    background-color: #45a049;
}


pre {
        white-space: pre-wrap; /* 改行やインデントを保持 */
        word-wrap: break-word;  /* 長い単語を折り返す */   
        font-family: Arial, sans-serif; /* 通常テキストに近いフォント */
        font-size: 16px; /* 通常のテキストサイズに調整 */
        line-height: 1; /* 行間を通常の段落に合わせる */
        color: #333; /* テキストカラーを調整 */
        background-color: transparent; /* 背景色を透明にする */
        padding: 0; /* パディングをなくす */
        margin: 0;
        border: none; /* ボーダーを削除 */
    }

p{
    margin: 2%, 0;
    padding: 0;
}

form{
    margin: 5%, auto;
    padding: 0;
}

/*iPhone用*/

@media screen and (max-width: 400px){

    body {
        margin: 0;  
        
        padding-left: 0%;
        padding-right: 0%;
        padding-top: 2%;
        padding-bottom: 2%;
        background-color: #218838;      /* bodyのデフォルトのマージンをリセット */
    }
    
    .bg {
        margin: 0;
        padding-left: 2%;
        padding-right: 2%;
        padding-top: 1%;
        padding-bottom: 2%;
        background-color: #f8f8fb;
    }
    
    .question{
        margin: 0;
        padding-left: 2%;
        padding-right: 2%;
        padding-top: 1%;
        padding-bottom: 1%;
        background-color: #fff;
        border-radius: 2px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        font-size: 12px; /* 通常のテキストサイズに調整 */
    }
    
    .answer{
        margin: 0;
        margin-top: 2%;
        padding-left: 2%;
        padding-right: 2%;
        padding-top: 1%;
        padding-bottom: 1%;
        background-color: #fff;
        border-radius: 2px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        font-size: 12px; /* 通常のテキストサイズに調整 */
    }
    
    h1 {
        margin: 0, auto;
        color: #333;
        font-size: 16px;
    }
    
    button {
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        border: none;
        cursor: pointer;
        margin: 0;
        border-radius: 2px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    button:hover {
        background-color: #45a049;
    }
    
    
    pre {
            white-space: pre-wrap; /* 改行やインデントを保持 */
            word-wrap: break-word;  /* 長い単語を折り返す */   
            font-family: Arial, sans-serif; /* 通常テキストに近いフォント */
            line-height: 1; /* 行間を通常の段落に合わせる */
            color: #333; /* テキストカラーを調整 */
            background-color: transparent; /* 背景色を透明にする */
            padding: 0; /* パディングをなくす */
            margin: 0;
            border: none; /* ボーダーを削除 */
            font-size: 12px; /* 通常のテキストサイズに調整 */
        }
    
    p{
        margin: 2%, 0;
        padding: 0;
    }
    
    form{
        margin: 5%, auto;
        padding: 0;
    }
    
}