body {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #ffffff;
    color: #333;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-container {
    max-width: 960px;
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
}

.top-header {
    width: 100%;
    color: white;
    padding-top: 15px;
}

a{
    color: #005691;
}

.header-content {
    max-width: 960px;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    display: flex;
    justify-content: left;
    align-items: center;
    height: 15px;
}

/* 🌟 色の修正: 必須マークをファイアブリックの背景色に戻す */
.required-star-label {
    background-color: firebrick; /* firebrick に変更 */
    color: white;
    font-size: 0.7em;
    padding: 2px 5px;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: middle;
    font-weight: bold;
}

.required-guide {
    text-align: right;
    font-size: 0.9em;
    color: #666;
}

.input_label {
    font-size: 1em;
    font-weight: bold;
    color: #333;
    margin-top: 5px;
    padding-left: 5px;
}

.error{
    color: red;
    font-size: 0.85em;
    font-weight: normal;
    height: 10px; /* エラーメッセージのスペースを確保 */
}

/* フォーム全体の外観 */
.register-card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    padding-top: 5px;
}

/* 🌟 色の修正: メイン見出しをオレンジに戻す */
.register-card h2 {
    color: #ff9800; /* オレンジに戻す */
    border-bottom: 2px solid #ff9800;
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: 1.4em;
}

/* フォーム内のセクション区切り */
.form-group-section {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px; 
    margin-top: 5px;
    margin-bottom: 15px;
    background-color: #fcfcfc;
}

/* 🌟 色の修正: セクション見出しをファイアブリックの縦線に戻す */
.form-group-section h3 {
    color: firebrick; 
    border-left: 4px solid firebrick; /* firebrick に変更 */
    padding-left: 10px;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.1em;
}

/* フォーム行のレイアウト (スマホ対応) */
.form-row {
    display: flex;
    /* 🌟 修正ポイント1: 折り返しを基本的にさせない (スマホでも横並びを優先) */
    flex-wrap: nowrap; 
    gap: 15px;
    margin-bottom: 0;
}

/* 氏名/カナの入力グループ */
.form-row .input-group {
    /* 🌟 修正ポイント2: 均等に幅を分割し、折り返しを抑制 */
    flex: 1 1 50%; /* 常に50%幅を占めるように設定 */
    margin-bottom: 10px;
    
    /* 画面幅が狭い場合、この設定によって要素の幅が縮小されるため、
       入力しづらい場合は、フォーム全体の max-width を調整することも検討してください。
       ここでは横並びを優先します。 */
}

@media (min-width: 600px) {
    .form-row .input-group {
        flex: 1 1 0; 
    }
}

/* 一般的な入力グループ */
.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    margin-bottom: 5px;

}

/* 入力欄の共通スタイル */
.input-group input[type="text"],
.input-group input[type="tel"],
.input-group input[type="email"],
.input-group input[type="password"],
.input-group input[type="date"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    min-height: 44px;
}

.input-group input[type="date"] {
    font-size: 1.2em;
}

.input-group select {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    min-height: 20px;
    width: 200px;
}

/* 🌟 色の修正: フォーカス色をオレンジに戻す */
.input-group input:focus {
    border-color: #005691;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 86, 145, 0.2);
}

.input-group select:focus {
    border-color: #005691;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 86, 145, 0.2);
}

/* ラジオボタンの調整 */
.radio-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 5px;
}

.radio-group input[type="radio"] {
    margin-right: 5px;
}

.radio-group .radio-label {
    font-weight: normal;
    font-size: 1.1em;
    margin-right: 5px;
}


/* 🌟 色の修正: 送信ボタンをオレンジに戻す */
.register-submit-button {
    width: 100%;
    padding: 15px;
    background-color: #ff9800; /* オレンジに戻す */
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 20px;
    outline: none;
}

.register-submit-button:hover {
    background-color: #e68a00; /* 濃いオレンジ */
}

.login-button:focus{
    background-color: Gold;
}

/* フッター */
.footer {
    position:relative;
    bottom: 0;
    width: 100%;
    padding: 5px 0;
    background-color: #e8e8e8;
    text-align: center;
}

.copyright {
    font-size: 0.8em;
    color: #666;
    margin: 0;

}