/* 基本設定 */
body {
    font-family: sans-serif;
    color: #333;
    background-color: #f4f4f4;
    padding: 1rem;
}

/* フォーム全体のスタイル */
form {
    max-width: 600px; /* フォームの最大幅 */
    margin: 0 auto;   /* 中央配置 */
    padding: 2rem;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* --- 指示に対応するスタイル --- */

.page-header {
    display: flex;                /* 子要素を横並びにする */
    justify-content: space-between; /* 両端に配置する */
    align-items: center;          /* 上下の高さを中央で揃える */
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #ddd;
}

/* h1のデフォルトの余白を調整 */
.page-header h1 {
    margin: 0;
}

/* フォーム内の要素を縦に並べる設定 */
form label,
form input[type="text"],
form input[type="file"],
form input[type="submit"],
form img {
    display: block;  /* 各要素をブロック要素にして縦に並べる */
    width: 100%;     /* 親要素の幅いっぱいに広げる */
    margin-bottom: 1rem; /* 各要素の下に余白を設ける */
}

/* ラベルのスタイル */
form label {
    font-weight: bold;
    margin-bottom: 0.5rem; /* ラベルと入力欄の間の余白を調整 */
}

/* 記入欄（input）のスタイル */
form input[type="text"] {
    padding: 12px;
    border: 1px solid #ccc; /* 枠で囲む */
    border-radius: 5px;
    font-size: 1rem;
}

/* 画像のスタイル */
form img {
    margin-bottom: 1.5rem;
    border-radius: 5px;
}

/* 更新ボタンのスタイル */
form input[type="submit"] {
    background-color: #007bff;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 1rem;
}

form input[type="submit"]:hover {
    background-color: #0056b3;
}

/* ... (他のCSSは同じ) ... */

/* フォーム内の要素を縦に並べる設定 */
form label,
form input[type="text"],
form textarea, /* <- textarea を追加 */
form input[type="file"],
form input[type="submit"],
form img {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
}

/* ... (ラベルなどのスタイルは同じ) ... */

/* 記入欄のスタイル */
form input[type="text"],
form textarea { /* <- textarea を追加 */
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    font-family: inherit; /* フォントを他の要素と合わせる */
}

/* ボタンを包むコンテナで左寄せを指定 */
.button-container {
    text-align: left;
    padding: 1rem; /* 周囲に余白を持たせる */
}

/* ボタン自体のスタイル */
.button {
    font-size: 1.1rem;  /* 文字を少し大きく */
    padding: 10px 20px; /* 内側の余白を増やしてボタン全体を大きく */
    
    /* 以下、見た目を整えるスタイル（お好みで調整） */
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f0f0f0;
    cursor: pointer;
}

.button:hover {
    background-color: #ddd;
}

.btn-back {
    display: inline-block;
    padding: 8px 16px;
    text-decoration: none;
    color: #333;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.btn-back:hover {
    background-color: #e0e0e0;
}