/* 画面全体を中央に配置 */
body {
    display: flex;
    justify-content: center; /* 横方向の中央 */
    align-items: center;     /* 縦方向の中央 */
    height: 100vh;           /* ビューポート全体の高さ */
    margin: 0;               /* 余白をなくす */
    font-family: Arial, sans-serif; /* フォントを指定 */
    background-color: #f0f0f0; /* 背景色 */
    opacity: 0; /* 初期状態で全体を透明に */
    transition: opacity 2s ease-in-out; /* 2秒かけてフェードイン */    
    /* フォームスタイル */
form {
    background-color: white;
    padding: 20px;
    border-radius: 8px; /* 角を丸くする */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影を追加 */
    width: 300px; /* フォームの横幅 */
    height: 350px;/* フォームの縦幅 */
    text-align: center; /* テキストを中央揃え */
    opacity: 0; /* 初期状態で透明 */
    transition: opacity 2s ease-in-out; /* フェードイン */
}
}
/* usernameのボックスのサイズ設定 */
#username {
    height: 25px;
    width: 100%;
    margin: 10px 0;
}
/* passwordのボックスのサイズ設定 */
#password{
    height: 25px;
    width: 100%;
    margin: 10px 0;
}
/* ボタンのスタイル */
button {
    width: 100%; /* ボタンの幅を100%にしてフォームと同じ幅に */
    padding: 10px;
    background-color: #000000; /* 黒色のボタン */
    color: white;
    border: none;
    border-radius: 4px; /* 角を丸く */
    cursor: pointer;
    font-size: 16px;
    margin-top: 20px; /* ボタンと入力フィールドの間に余白 */
}
/* ボタンにホバー時の色反転 */
button:hover {
    background-color: white; /* ホバー時の背景色は白 */
    color: #000000; /* ホバー時の文字色は緑 */
    border: 2px solid #505050; /* ホバー時の境界線の色も緑に */
}

#rogin {
    font-size: 30px;
    font-family:游ゴシック;
}
p {
    font-size: 15px;
    padding-top: 10px;
    padding-bottom: 40px;
}

body {
    margin: 0;
  }
  
.Gradation_2 {
    display: flex;
    width: 100%;
    height: 100vh;
    background: linear-gradient(0deg, #f3a4de, #b163ef);
    background-size: 200% 200%;
    animation: Grad 5s ease infinite;
    align-items: center;
    justify-content: center;
}
  
 
@keyframes Grad {
      0%{background-position:50% 0%}
      50%{background-position:50% 100%}
      100%{background-position:50% 0%}
}




.address_memo{
    background-color: rgb(255, 255, 255);
    position:fixed;
    border-radius: 4px;
    text-align: center;    
    height: 350px;
    width: 300px;
    right: 1%;
    
}

@media (max-width: 1000px) {
    .address_memo{
        display: none
    }

}

.address-text{
    font-size: 20px;
    margin-top: 15px;
    font-family: Arial, sans-serif;
}

.address{
    font-size: 15px;
    margin-bottom: 10px;
    background-color: rgb(173, 238, 238);
    font-family: Arial, sans-serif;
}


.warning {
    display: none;  /* 普段は非表示にしておく場合 */
    background: #fee;
    border: 2px solid #f00;
    border-radius: 8px;
    padding: 20px;
}


@media (max-width: 1000px) {
    .warning {
        display: flex;
        flex-direction: column; /* 縦並びを強制する */
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        justify-content: center; /* 中身を上下中央 */
        align-items: center;
        text-align: center;
        background: rgba(255, 255, 255, 0.856); 
        border: none;  /* 全画面なので枠は不要 */
        border-radius: 0;
        z-index: 9999; /* 最前面に */
    }
}