/* ==========================================
   ログイン情報・案内エリア
   ========================================== */

/* 全体を囲む白いボックス（見やすく整える） */
	.login-info-box {
	    text-align: center;      /* 中身をすべて中央揃えにする */
	    margin: 40px auto;       /* 上下にしっかり余白を作る */
		font-size: 1rem;
	    padding: 20px;
	    max-width: 720px;        /* PCで広がりすぎないように制限 */
	}

	/* タイトル（IDとパスワード）のスタイル */
	.login-title {
	    font-size: 1.4rem;       /* 文字の大きさ */
	    font-weight: bold;       /* 太字 */
	    color: #333333;          /* 文字の色（お好みで） */
	    margin-bottom: 15px;     /* 下とのスキマ */
	}

	/* 案内文章のスタイル */
	.login-text {
	    font-size: 1rem;
	    line-height: 1.6;        /* 行間を広げて読みやすくする */
	    color: #555555;
	    margin-bottom: 20px;     /* 画像とのスキマ */
	}

	/* メール画像のスタイル（スマホ対応） */
	.login-mail-img {
	    width: 50%;              /* PCでの基本サイズ */
	    min-width: 200px;        /* スマホでも潰れない最低の横幅 */
	    height: auto;            /* 縦横比を維持 */
	    margin: 10px 0;          /* 上下の余白（古いvspaceの代わり） */
	}

/* ==========================================
   上部・お礼の言葉エリア
   ========================================== */

/* 全体を囲む枠の設定（枠ごと画面の真ん中に寄せる） */
	.thank-you-box {
	    max-width: 750px; 	/* PCで横に広がりすぎて読みづらくなるのを防ぐ */
	    margin: 30px auto;  /* 上下に30pxの余白を作り、左右は自動で真ん中（auto）にする */
	    padding: 0 20px; 	/* スマホの画面端に文字がくっつかないための左右のスキマ */
	}

	/* 文章自体のスタイル */
	.thank-you-text {
	    font-size: 1.1rem;	/* 読みやすい少し大きめの文字（お好みで調整） */
	    font-weight: bold;  /* 元のH2のように太字を維持 */
	    line-height: 1.8;   /* 【重要】行間を広げて圧倒的に読みやすくする */
	    color: #333333;
	    text-align: left; 	/* 【重要】基本は読みやすい「左詰め」にする */
	}

/* ==========================================
   定期演奏会入り口（バナー部分）
   ========================================== */

/* 全体を囲む枠（縦並びにして、中身を絶対に中央に寄せる） */
.banner-container {
    display: flex;
    flex-direction: column; 	/* 中身（文字と画像）を縦に並べる */
    justify-content: center;	/* 念のため上下も中央寄せ */
    align-items: center;    	/* 【重要】左右の真ん中に揃える */
    text-align: center;     	/* 【重要】文字自体も中央揃えにする */
    margin: 20px auto;      	/* 上下に余白を作り、この枠自体も画面中央に置く */
    width: 100%;            	/* 横幅いっぱいに広げる */
}

/* タイトルテキストのスタイル */
.banner-title {
    display: block;         	/* 文字を1つの「塊」にして、確実に独立させる */
    font-weight: bold;      	/* 太字にする */
    margin-bottom: 15px;    	/* 画像との間のスキマ */
    font-size: 1.2rem;        	/* 文字の大きさ */
    width: 100%;            	/* 横幅いっぱいに使う */
}

/* 画像のスタイル（はみ出し防止・縮小対応） */
.banner-img {
    width: 60%;             	/* PCでは画面の25%の大きさに指定 */
    max-width: 500px;        	/* 【最重要】スマホなど画面が狭い時、画面幅を超えて絶対に「はみ出さない」ようにする */
    height: auto;           	/* 縦横比を綺麗に維持する */
}

/* 📱 スマホ画面（幅が768px以下）の時の追加ルール */
@media (max-width: 768px) {
    .banner-img {
        width: 80%;        	/* スマホだと25%では小さすぎるので、画面の60%くらいまで大きくして見やすくする */
		max-width: 500px; 	/* 大きくなりすぎるのを防ぎます */
    }
}