/* public/css/styles.css */

.container {
    padding: 20px;
    max-width: 960px; /* ページの最大幅を設定 */
    margin: 0 auto; /* 中央寄せ */
}

.form-row {
    display: flex; /* Flexboxを有効化 */
    flex-wrap: wrap; /* コンテンツがオーバーフローしたら折り返す */
    justify-content: center;
    /*justify-content: space-between;  子要素の間に均等なスペースを設定 */
    /*align-items: flex-start;  子要素を上端に揃える */
}

.form-group {
    flex: 1; /* 全子要素に等しいスペースを割り当て */
    margin-right: 20px; /* 右にマージンを設定 */
    min-width: 250px; /* 最小幅を設定して折り返しを避ける */
}

.form-group:last-child {
    margin-right: 0; /* 最後の子要素の右マージンを削除 */
}

.form-control {
    width: 100%; /* 入力要素の幅を親要素の100%に設定 */
    margin-bottom: 10px; /* 下にマージンを設定 */
}

.btn-submit {
    width: 10%; /* ボタンの幅を50%に設定 */
    margin: 20px 0; /* 上下にマージンを設定して位置を調整 */
    display: block; /* ブロックレベルで表示 */
}