/* C:\inetpub\sites\EXCEE\myproject\accounts\static\accounts\css\signup.css */


    body {
        background-image: url("../images/signup.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .form-label-group {
        margin-bottom: 20px;
    }
    .form_wrap-2 .form-control {
        margin-bottom: 20px;
    }
    .button .btn.custom-button {
        width: 150px;
        height: 40px;
        padding: 5px;
        font-size: 20px;
    }

    .card-auth {
        /* ... その他のプロパティ ... */
        height: auto; /* 高さを内容に基づいて自動調整 */
        width: 60%; /* 横幅を現在の2/3程度に調整 */
        padding: 2rem; /* 内側の余白を適切に設定 */
        box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* 影を強調 */
        border-radius: 1rem; /* 角をより丸くする */
        background-color: #ffe0f0; /* カードの背景色を柔らかいピンクに設定 */
        margin: auto; /* 水平方向の中央揃え */
        display: flex; /* Flexboxを有効化 */
        flex-direction: column; /* 子要素を縦方向に並べる */
        justify-content: center; /* 子要素を垂直方向の中央に配置 */
        min-height: 30vh; /* 最小の高さをビューポートの高さに設定 */
        align-items: center; /* 子要素を水平方向の中央に配置 */


    }
    .card-body {
        /* ... その他のプロパティ ... */
        width: 100%; /* 横幅をビューポートの1/3に設定 */
        margin: auto; /* 水平方向の中央揃え */
        padding: 2rem; /* 内側の余白を増やす */
        background-color: #ffffff; /* 背景色を白に設定 */
        border-radius: 1rem; /* 角をより丸くする */

    }
    .form-auth {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .form-label-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 1rem; /* 余白を調整 */
    }
    .form-control {
        width: 100%; /* 入力フィールドの幅を調整 */
        padding: 0.5rem; /* 入力フィールドの内側の余白を調整 */
        border: 2px solid #fface4; /* ボーダーをかわいい色に設定 */
        border-radius: 0.5rem; /* 入力フィールドの角を丸くする */
        margin-bottom: 1rem; /* 入力フィールド間の余白を調整 */
    }
    .btn.custom-button {
        /* ... その他のプロパティ ... */
        background-color: #fface4; /* ボタンの背景色をかわいい色に設定 */
        border-color: #fface4; /* ボタンのボーダー色を背景色と同じに設定 */
        color: #ffffff; /* ボタンのテキスト色を白に設定 */
        border-radius: 0.5rem; /* ボタンの角を丸くする */
        font-weight: bold; /* ボタンのフォントを太くする */
        transition: background-color 0.3s ease; /* 背景色の変化を滑らかにする */
    }
    .btn.custom-button:hover {
        background-color: #ff92b4; /* ホバー時の背景色を変更 */
        border-color: #ff92b4; /* ホバー時のボーダー色を変更 */
    }
    /* その他のスタイルは変更なし */
		
	@media (max-width: 768px) {
		.card-auth {
			width: 90%; /* 小さなデバイスでのカードの幅を調整 */
			padding: 1rem; /* 小さなデバイスでの内側の余白を調整 */
		}
		.card-body {
			padding: 1rem; /* 小さなデバイスでの内側の余白を調整 */
		}
		.form-control, .btn.custom-button {
			width: 90%; /* 小さなデバイスでの入力フィールドとボタンの幅を調整 */
		}
	}

	/* 文字サイズの調整 */
	@media (max-width: 768px) {
		h5, p, li {
			font-size: smaller; /* 小さなデバイスでの文字サイズを小さくする */
		}
	}

	@media (max-width: 480px) {
		.card-auth {
			width: 100%; /* より小さなデバイスでのカードの幅を最大に */
			margin: 0; /* より小さなデバイスでのマージンをなくす */
			border-radius: 0; /* より小さなデバイスでの角の丸みをなくす */
		}
		.card-body {
			width: auto; /* より小さなデバイスでのカードボディの幅を自動調整 */
			margin: 0; /* より小さなデバイスでのマージンをなくす */
			border-radius: 0; /* より小さなデバイスでの角の丸みをなくす */
		}
		.form-control, .btn.custom-button {
			width: 100%; /* より小さなデバイスでの入力フィールドとボタンの幅を最大に */
		}
	}

	/* 390x844ピクセルのデバイスに対応 */
	@media only screen and (min-device-width : 390px) and (max-device-width : 844px) {
		.card-auth {
			width: 80%; /* 390x844ピクセルのデバイスでのカードの幅を調整 */
			aspect-ratio: 390 / 844; /* カードの縦横比を390:844に保持 */
			padding: 1rem; /* 内側の余白を調整 */
		}
		.card-body {
			padding: 1rem; /* 内側の余白を調整 */
		}
		.form-control, .btn.custom-button {
			width: 100%; /* 入力フィールドとボタンの幅を最大に */
		}
		h5, p, li {
			font-size: 14px; /* 文字サイズを14pxに設定 */
		}
	}