/**
 * エラーメッセージ用の追加スタイル
 * 視認性向上のため、背景色とボーダーを追加
 */

/* ログイン画面のエラーメッセージ */
section.mypage-container .login-wrapper .login-inner p.attn {
    color: #b62727;
    margin-bottom: 15px;
    padding: 12px 15px;
    background-color: #fef2f2;  /* 薄い赤色の背景 */
    border: 1px solid #fecaca;  /* 淡い赤色のボーダー */
    border-radius: 4px;
    font-size: 1.4rem;
    line-height: 1.6;
}

/* アイコンを追加（オプション） */
section.mypage-container .login-wrapper .login-inner p.attn:before {
    content: "⚠ ";  /* 警告アイコン */
    font-weight: bold;
    margin-right: 5px;
}

/* 申込フォームのエラーメッセージ */
section.apply-container p.attn {
    font-weight: normal;
    color: #b62727;
    font-size: 1.4rem;
    padding: 12px 15px;
    background-color: #fef2f2;  /* 薄い赤色の背景 */
    border: 1px solid #fecaca;  /* 淡い赤色のボーダー */
    border-radius: 4px;
    margin: 10px 0;
}

/* 申込フォームのアイコン */
section.apply-container p.attn:before {
    content: "⚠ ";  /* 警告アイコン */
    font-weight: bold;
    margin-right: 5px;
}

/* モバイル対応 */
@media (max-width: 768px) {
    section.apply-container p.attn,
    section.mypage-container .login-wrapper .login-inner p.attn {
        font-size: 1.3rem;
        padding: 10px 12px;
    }
}

/* ホバー時の効果（オプション） */
p.attn:hover {
    background-color: #fee2e2;  /* 少し濃い背景色 */
    border-color: #fca5a5;  /* 少し濃いボーダー */
}

/* 複数のエラーメッセージが並ぶ場合の間隔調整 */
p.attn + p.attn {
    margin-top: 10px;
}

/* グローバルな.attnクラス（他のページでも使用可能） */
.attn {
    color: #b62727;
    padding: 12px 15px;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
    font-size: 1.4rem;
    margin: 10px 0;
}

.attn:before {
    content: "⚠ ";
    font-weight: bold;
    margin-right: 5px;
}